Geek Answers Handbook

Crop image from camera before downloading (Phonegap)

I would like to ask you ..

I have code ... using phonegap .. but I was confused about how to call / crop the image after it was taken from the camera / file manager ...

here is the code ...

<!DOCTYPE HTML> <html> <head> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <link rel="stylesheet" href="js/jquery.mobile-1.0.min.css" /> <script src="js/jquery-1.6.4.min.js"></script> <script src="js/jquery.mobile-1.0.min.js"></script> <script type="text/javascript" charset="utf-8" src="phonegap-1.1.0.js"></script> <script type="text/javascript" charset="utf-8"> var deviceReady = false; /** * Take picture with camera */ function takePicture() { navigator.camera.getPicture( function(uri) { var img = document.getElementById('camera_image'); img.style.visibility = "visible"; img.style.display = "block"; img.src = uri; window.location.hash = "#page2"; /*document.getElementById('camera_status').innerHTML = "Success"; */ }, function(e) { console.log("Error getting picture: " + e); document.getElementById('camera_status').innerHTML = "Error getting picture."; }, { quality: 50, destinationType: navigator.camera.DestinationType.FILE_URI, targetWidth: 1153, targetHeight: 385 } ); }; /** * Select picture from library */ function selectPicture() { navigator.camera.getPicture( function(uri) { var img = document.getElementById('camera_image'); img.style.visibility = "visible"; img.style.display = "block"; img.src = uri; document.getElementById('camera_status').innerHTML = "Success"; window.location.hash = "#page2"; }, function(e) { console.log("Error getting picture: " + e); document.getElementById('camera_status').innerHTML = "Error getting picture."; }, { quality: 50, targetWidth: 1153, targetHeight: 385, destinationType: navigator.camera.DestinationType.FILE_URI, sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY}); }; /** * Upload current picture */ function uploadPicture() { // Get URI of picture to upload var img = document.getElementById('camera_image'); var imageURI = img.src; if (!imageURI || (img.style.display == "none")) { document.getElementById('camera_status').innerHTML = "Take picture or select picture from library first."; return; } // Verify server has been entered server = document.getElementById('serverUrl').value; if (server) { // Specify transfer options var options = new FileUploadOptions(); options.fileKey="file"; options.fileName=imageURI.substr(imageURI.lastIndexOf('/')+1); options.mimeType="image/jpeg"; options.chunkedMode = false; // Transfer picture to server var ft = new FileTransfer(); $.mobile.showPageLoadingMsg(); ft.upload(imageURI, server, function(r) { document.getElementById('camera_status').innerHTML = "Upload successful: "+r.bytesSent+" bytes uploaded."; viewUploadedPictures(); $.mobile.hidePageLoadingMsg(); window.location.hash = "#page3"; }, function(error) { $.mobile.hidePageLoadingMsg(); document.getElementById('camera_status').innerHTML = "Upload failed: Code = "+error.code; }, options); } } /** * View pictures uploaded to the server */ function viewUploadedPictures() { // Get server URL server = document.getElementById('serverUrl').value; if (server) { // Get HTML that lists all pictures on server using XHR var xmlhttp = new XMLHttpRequest(); // Callback function when XMLHttpRequest is ready xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState === 4){ // HTML is returned, which has pictures to display if (xmlhttp.status === 200) { document.getElementById('server_images').innerHTML = xmlhttp.responseText; } // If error else { document.getElementById('server_images').innerHTML = "Error retrieving pictures from server."; } } }; xmlhttp.open("GET", server , true); xmlhttp.send(); } } /** * Function called when page has finished loading. */ function init() { document.addEventListener("deviceready", function() {deviceReady = true;}, false); window.setTimeout(function() { if (!deviceReady) { alert("Error: PhoneGap did not initialize. Demo will not run correctly."); } },2000); } </script> </head> <body onload="init();"> <!-- Page 1 --> <div data-role="page" id="page1"> <!-- Page 1 Header --> <div data-role="header"> <h1>Ambil Gambar</h1> </div> <!-- Page 1 Content --> <div data-role="content"> <center> <a href="javascript:void(0)" onclick="takePicture();"> <img src="image/camera.png" width="150px" height="150px"> </a> <br> <br> <b>Atau</b> <br> <br> <a href="javascript:void(0)" onclick="selectPicture();"> <img src="image/upload.png"> </a> </center> </div> <!-- Page 1 Footer --> <div data-role="footer"> <h4>Footer 1</h4> </div> </div> <!-- Page 2 --> <div data-role="page" id="page2"> <!-- Page 2 Header --> <div data-role="header"> <h1>Header 2</h1> </div> <!-- Page 2 Content --> <div data-role="content"> <img style="width:100%;visibility:hidden;display:none;" id="camera_image" src="" /> <input type="button" onclick="uploadPicture();" value="Upload Picture" /> <input id="serverUrl" type="text" value="http://kiosban.com/android/camera/upload.php" /> Status : <span id="camera_status"></span> <a href="#page3">Skip</a> </div> <!-- Page 2 Footer --> <div data-role="footer"> <h4>Footer 2</h4> </div> </div> <!-- Page 3 --> <div data-role="page" id="page3"> <!-- Page 3 Header --> <div data-role="header"> <h1>Header 3</h1> </div> <!-- Page 3 Content --> <div data-role="content"> <div id="server_images"></div> <h3>Server:</h3> <b>Images on server:</b> <div id="server_images"></div> <input type="button" onclick="viewUploadedPictures();" value="View Uploaded Pictures" /> </div> <!-- Page 2 Footer --> <div data-role="footer"> <h4>Footer 2</h4> </div> </div> </body> </html>

I want to call crop the image on # page2, so there is a download button to load the cropped image ...

can someone help me do this?

+4
source share
2 answers

Phonegap has no built-in cropping features. Some platforms (iPhone for sure) allow the user to crop the image after taking it with the camera, but before it is returned to your JavaScript code, if you pass the allowEdit = true getPicture parameter. But you will not have control over your script.

You will need to implement the cropping function yourself using JavaScript. This is easier than expected with the HTML5 canvas tag. Here you can find a beautiful tutorial here .

+7
source

I found a solution for this (it is too late, but used for someone like me), but after taking the image you need to pass the image path to the plugin (native android) for embroidery.

put the following code in your image capture or select an image from the gallery (in your index.html):

 navigator.camera.getPicture(function(imageURI){ window.resolveLocalFileSystemURI(imageURI, function(fileEntry){ fileEntry.file(function(fileObj) { var imagedata ="sample/new001.img"; // able to get the image location using phonegap cropImage.createEvent(imagedata); }); }, fail); }, fail, { quality: 50, destinationType: destinationType.NATIVE_URI, sourceType: pictureSource.PHOTOLIBRARY });

after that crop.image.js should look like (specify this file name in your index.html)

 var cropImage = { createEvent: function(fileName) { cordova.exec( null, // success callback function null, // error callback function 'CropImage', // mapped to our native Java class called "CropImage" 'GetImageName', // with this action name [fileName] ); } }

Your java code is like

 public class CropImage extends CordovaPlugin{ public final String ACTION_GET_IMAGE_NAME = "GetImageName"; Uri myUri; @Override public boolean execute(String action, JSONArray args, CallbackContext callbackContext) { // Log.e(TAG,"Inside Version plugin."); boolean result = false; if(action.equals(ACTION_GET_IMAGE_NAME)) { try { myUri = Uri.parse(args.getString(0)); cropCapturedImage(myUri); } catch (JSONException e) { // TODO Auto-generated catch block e.printStackTrace(); } result = true; } return result; } public void cropCapturedImage(Uri picUri){ //call the standard crop action intent Intent cropIntent = new Intent("com.android.camera.action.CROP"); //indicate image type and Uri of image cropIntent.setDataAndType(picUri, "image/*"); //set crop properties cropIntent.putExtra("crop", "true"); cropIntent.putExtra("aspectX", 1); cropIntent.putExtra("aspectY", 1); cropIntent.putExtra("outputX", 256); cropIntent.putExtra("outputY", 256); // for save the image in same location with same name. File f = new File(Environment.getExternalStorageDirectory()+"your image location here"); cropIntent.putExtra(MediaStore.EXTRA_OUTPUT, Uri.fromFile(f)); cropIntent.putExtra("output", Uri.fromFile(f)); cropIntent.putExtra("return-data", false); //start the activity - we handle returning in onActivityResult this.cordova.startActivityForResult((CordovaPlugin) this,cropIntent, 2); } public void onActivityResult(int requestCode, int resultCode, Intent intent) { //Log.e("final", String.valueOf(requestCode)); /*if(requestCode == 2){ //Create an instance of bundle and get the returned data Bundle extras = intent.getExtras(); //get the cropped bitmap from extras Bitmap thePic = extras.getParcelable("data"); }*/ } }

Remember to add this class to your CONFIG.XML and add the necessary permissions. Feel free to ask any doubts.

+2
source

More articles:


All Articles