In my Phonegap Android application, I am using Jcrop and camera plugin given by Phonegap. In this, user can choose an image from Gallery of the device and crop that image. Picking the image from Gallery and cropping works fine but when I choose another image, that image won't load and previous image only remains. How can I resolve this? Please help me. Code I am using is:
<!DOCTYPE html> <html> <head> <title>Capture Photo</title> <script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script> <script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/jquery.Jcrop.js" type="text/javascript"></script> <script src="js/jquery.Jcrop.min.js" type="text/javascript"></script> <link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" /> <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; jQuery(function($) { $('#largeImage').Jcrop({ onChange : updatePreview, onSelect : updatePreview, aspectRatio : 1 }); function updatePreview(c) { if(parseInt(c.w) > 0) { // Show image preview var imageObj = $("#largeImage")[0]; var canvas = $("#preview")[0]; var context = canvas.getContext("2d"); context.drawImage(imageObj, c.x, c.y, c.w, c.h, 0, 0, canvas.width, canvas.height); var vData = canvas.toDataURL(); // alert('vData'+vData); $('#crop_result').attr('src', vData); } }; }); } function capturePhoto() { // Take picture using device camera and retrieve image as base64-encoded string 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) { // Retrieve image file location from specified source navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50, destinationType: destinationType.FILE_URI, sourceType: source }); } // Called if something bad happens. // function onFail(message) { alert('Failed because: ' + message); } </script> </head> <body> <canvas id="preview" style="width:150px;height:150px;overflow:hidden;display:none"></canvas> <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="" /> <img id="crop_result" /> </body> </html>