I have developed one application in Sencha Touch 2. I want to design a page in such a way that the page has a default image and one button below that. By clicking that button device camera should open (device mainly iPad and iPhone) and after capturing the image lets see it stored in a folder named as "capture" in your device. Then the captured image should replace that default image.
I want to use PhoneGap compulsorily. I have seen PhoneGap APIs for camera but I don't get it how to use it exactly. I am using Mac and Xcode for development.
In my app With sencha touch 2 and Phonegap 1.4 in Controller on take photo button handler
onTakePhotoButton: function(){
// Retrieve image file location from specified source
navigator.camera.getPicture(uploadPhoto, function (message) {
alert('Get picture failed');
}, {
quality: 50,
destinationType: navigator.camera.DestinationType.FILE_URI,
sourceType: navigator.camera.PictureSourceType.CAMERA //or PHOTOLIBRARY
}
);
function uploadPhoto(imageURI) {
var options = new FileUploadOptions();
options.fileKey = "file";
var imagefilename = Number(new Date()) + ".jpg";
options.fileName = imagefilename;
options.mimeType = "image/jpeg";
options.chunkedMode = false;
var params = new Object();
params.image = imagefilename;
options.params = params;
var ft = new FileTransfer();
ft.upload(imageURI,your_request_upload_url_on_server, win, fail, options);
}
function win(r) {
console.log("Code = " + r.responseCode);
console.log("Response = " + r.response);
console.log("Sent = " + r.bytesSent);
var json_obj = Ext.decode(r.response);//remote server funciton upload return json type
if(json_obj!=null && json_obj.response.image_name!=null){
console.log(json_obj.response.image_name);
imageDisplay.setSrc(your_image_root_tmp+json_obj.response.image_name+'?dc='+Number(new Date()));
}else{
Ext.Msg.alert('Errors', "The server response failure!");
}
}
function fail(error) {
alert("An error has occurred: Code = " + error.code);
}
}
you can refer more detail here http://zacvineyard.com/blog/2011/03/upload-a-file-to-a-remote-server-with-phonegap
capturePhoto:function(){
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50 });
function onPhotoDataSuccess(imageData) {
// Uncomment to view the base64 encoded image data
// console.log(imageData);
// Get image handle
//
var smallImage = document.getElementById('userLogo');
// 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;
plz verify ...
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.