Learn the powerful enterprise adaptable database:

Getting Started With ADABAS & Natural

Saturday, May 6, 2017

How To: Build PhoneGap.com App with Camera Plug In


.
How To: Build PhoneGap.com App with Camera Plug In
This demo demonstrates the minimal use of files/codes.

1) Create Project Folder

Eg myapp

2) Add Config file

Eg codes
config.xml
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.notarazi.bpg" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
   <name>BPG Example</name>
   <description>
       Build Phone Gap Example
   </description>
   <author email="notarazi@gmail.com" href="http://fb.me/notarazi.blogs">
       Notarazi Team
   </author>
   <content src="index.html" />
   <access origin="*" />
   <allow-intent href="http://*/*" />
   <allow-intent href="https://*/*" />
   <allow-intent href="tel:*" />
   <allow-intent href="sms:*" />
   <allow-intent href="mailto:*" />
   <allow-intent href="geo:*" />
   <platform name="android">
       <allow-intent href="market:*" />
   </platform>
   <platform name="ios">
       <allow-intent href="itms:*" />
       <allow-intent href="itms-apps:*" />
   </platform>
   <engine name="android" spec="^6.2.3" />
   <engine name="ios" spec="^4.4.0" />
   
<plugin name="cordova-plugin-camera" spec="^2.4.1" />
   <plugin name="cordova-plugin-whitelist" spec="^1.3.2" />
</widget>

3) Add Index File

Create a sub folder www.
Create index file in www folder.
index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Capture Photo</title>
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">
    var pictureSource;   // picture source
    var destinationType; // sets the format of returned value
    document.addEventListener("deviceready",onDeviceReady,false);
    function onDeviceReady() {
        pictureSource=navigator.camera.PictureSourceType;
        destinationType=navigator.camera.DestinationType;
    }
    function onPhotoDataSuccess(imageData) {
      var smallImage = document.getElementById('smallImage');
      smallImage.style.display = 'block';
      smallImage.src = "data:image/jpeg;base64," + imageData;
    }
    function onPhotoURISuccess(imageURI) {
      var largeImage = document.getElementById('largeImage');
      largeImage.style.display = 'block';
      largeImage.src = imageURI;
    }
    function capturePhoto() {
      navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
        destinationType: destinationType.DATA_URL });
    }
    function capturePhotoEdit() {
      navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true,
        destinationType: destinationType.DATA_URL });
    }
    function getPhoto(source) {
      navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
        destinationType: destinationType.FILE_URI,
        sourceType: source });
    }
    function onFail(message) {
      alert('Failed because: ' + message);
    }
    </script>
  </head>
  <body>
    <br/>
    <br/>
    <button onclick="capturePhoto();">Capture Photo</button> <br>
    <button onclick="capturePhotoEdit();">Capture Editable Photo</button> <br>
    <button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button><br>
    <button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From Photo Album</button><br>
    <img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
    <img style="display:none;" id="largeImage" src="" />
  </body>
</html>

4) Zip the project file

Ie myapp.zip

5) Upload to build.phonegap.com

6) Download and Test

Reference



.

No comments:

Post a Comment