Crop Image from camera before upload (Phonegap)
Question
i would like to ask you..
i have a code... using phonegap.. but i was confused about how to call / crop the image after take it from camera / file manager...
here 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 image crop on #page2, so there is an upload button to upload the cropped image...
can anybody help me do that??
2 answers
solution1
7 2012-06-22 07:44:49
PhoneGap does not have built-in crop features. Some platforms (iPhone for sure) allows the user to crop the picture after taking it with the camera but before it would be returned to your JavaScript code if you pass the allowEdit = true parameter to getPicture. But you won't have control here from your script.
You'll have to implement the cropping feature yourself from JavaScript. It is easier then expected with the canvas tag of HTML5. You can find a pretty tutorial here .
solution2
2 2014-08-18 17:21:11
I found the solution for this(it is too late but used for someone like me) but after taking image you need to pass the image path to the plugin(Native android) for croping.
put the following code in your image capture or pick image from 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 be like (include 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");
}*/
}
}
Don't forget to add this class in your CONFIG.XML and add the necessary permissions. Feel free to ask any doubts.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Crop image from camera and save it
Cant crop image from camera
Crop image from camera(android)
Not getpath while Crop image Before Upload
Compress camera image before upload
crop image by taking photo from camera
capture image from camera and crop not working
Sending an image for Crop to Camera
Android crop camera image
Choose an image from camera or gallery using phonegap
Related Tags