Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  <head>
<link href="//code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<meta name="description" content="[add your bin description]" />
    <title>Capture Photo</title>
​
    <script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
    <script type="text/javascript" charset="utf-8">
​
    var pictureSource;   // picture source
    var destinationType; // sets the format of returned value 
    var encodingType; // sets the format of returned value 
​
    // Wait for PhoneGap to connect with the device
    //
    document.addEventListener("deviceready",onDeviceReady,false);
​
    // PhoneGap is ready to be used!
    //
    function onDeviceReady() {
      console.log("onDeviceReady");
        pictureSource=navigator.camera.PictureSourceType;
        console.log("onDeviceReady1");
​
        destinationType=navigator.camera.DestinationType;
        console.log("onDeviceReady2");
        encodingType=navigator.camera.EncodingType;
​
    }
​
    // Called when a photo is successfully retrieved
    //
    function onPhotoDataSuccess(imageData) {
      alert("hi");
      // Uncomment to view the base64 encoded image data
      console.log(imageData);
      var re = /\?(\d*)$/;
      imageData=imageData.replace(re, "");
      alert("imageData is "+imageData);
​
      // Get image handle
      //
      var smallImage = document.getElementById('smallImage');
​
      // Unhide image elements
      //
      smallImage.style.display = 'block';
​
      // Show the captured photo
      // The inline CSS rules are used to resize the image
      //
      smallImage.src = "data:image/jpeg;base64," + imageData;
    }
​
    // Called when a photo is successfully retrieved
    //
    function onPhotoURISuccess(imageURI) {
      // Uncomment to view the image file URI 
      console.log(imageURI);
      // alert("uri is "+imageURI);
      var re = /\?(\d*)$/;
      imageURI=imageURI.replace(re, "");
      alert("imageURI is "+imageURI);
​
      // Get image handle
      //
      var largeImage = document.getElementById('largeImage');
​
      // Unhide image elements
      //
      largeImage.style.display = 'block';
​
      // Show the captured photo
      // The inline CSS rules are used to resize the image
      //
      largeImage.src = imageURI; 
    }
​
    // A button will call this function
    //
    function capturePhoto() {
      // Take picture using device camera and retrieve image as base64-encoded string
      navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 100, targetWidth: -1, targetHeight: -1, encodingType:encodingType.PNG });
    }
​
    // A button will call this function
    //
    function capturePhotoEdit() {
      // Take picture using device camera, allow edit, and retrieve image as base64-encoded string  
      navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 100, allowEdit: true, targetWidth: -1, targetHeight: -1 ,encodingType:encodingType.PNG, }); 
    }
​
    // A button will call this function
    //
    function getPhoto(source) { 
      // Retrieve image file location from specified source
      navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 100, targetWidth: -1, targetHeight: -1 , 
        destinationType: destinationType.FILE_URI,encodingType:PNG,
        sourceType: source });
    }
​
    // Called if something bad happens.
    // 
    function onFail(message) {
      alert('Failed because: ' + message);
    }
​
    </script>
  </head>
  <body>
    <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="width:60px;height:60px;" id="smallImage" src="a.png" />
    <img style="" id="largeImage" src="a.png" />
  </body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers