I'm new programing in sencha touch framework, i'm working in an app(android) which has to take a picture and show it later in another view, but the picture is taken without problems, but once i take the picture, the app crash, it even doesn't call the failure event. I'm using cordova's navigator.camera.getPicture function to take the picture. Could anybody tell me, what am i missing??
I did like this way you may try
config: {
cls:'cameraimageoverlay',
items: [
{
xtype: 'button',
ui: 'confirm',
iconCls: 'confirm',
id:'devicecapturephoto',
text: 'Take Photo',
margin: '10 40',
width: '72%',
height: 36
}
],
listeners:[
{
fn: 'capturePhoto',
event: 'tap',
delegate: '#devicecapturephoto'
}
]
}
capturePhoto function
capturePhoto:function() {
// Take picture using device camera and retrieve image as base64-encoded string
try{
var pictureSource; // picture source
var destinationType; // sets the format of returned value
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady () {
// alert('device ready');
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;
}
// Called when a photo is successfully retrieved
//
function onPhotoURISuccess(imageURI) {
// Uncomment to view the image file URI
// console.log(imageURI);
// Get image handle
//
var largeImage = document.getElementById('largeImage');
// Unhide image elements
//
largeImage.style.display = 'block';
// Show the captured photo
// The in-line CSS rules are used to resize the image
//
largeImage.src = imageURI;
}
// A button will call this function
//
// Take picture using device camera and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50, correctOrientation: true,
destinationType: destinationType.DATA_URL });
// 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: 20, allowEdit: true,
destinationType: destinationType.DATA_URL });
}
// A button will call this function
//
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);
}
}
catch(err){
// alert(err);
}
}
you may refer http://docs.phonegap.com/en/2.3.0/cordova_camera_camera.md.html
Related
i am new in Ionic, i am trying to get picture and want to store copy or store image into internal storage so i can get back captured image on any view.
I don't know how to store images in internal Storage.
I have read this.
this is Helpful but not solving my issue.
My Controller is here.
Help me in this.
Controller
/**** tab Camera Controller ***/
.controller('tabCameraCtrl', function($scope, $state, $cordovaCamera) {
/**********function to Open Camera *********/
$scope.openCamera = function() {
document.addEventListener("deviceready", function() {
var options = {
quality: 50,
destinationType: Camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.CAMERA,
// allowEdit: true,
//encodingType: Camera.EncodingType.JPEG,
targetWidth: 100,
targetHeight: 100,
//popoverOptions: CameraPopoverOptions,
saveToPhotoAlbum: false
// correctOrientation: true
};
$cordovaCamera.getPicture(options).then(function(imageURI) {
var image = document.getElementById('myImage');
image.src = imageURI;
$scope.lastPhoto = imageURI;
window.localStorage.setItem('image',JSON.stringify(imageURI));
console.log('success')
console.log('Image Address');
console.log(imageURI);
}, function(err) {
// error
console.log(err)
});
}, false);
}
Help me to solve this problem.
Please help me any one how to select only the video from the gallery in android and iOS in cordova
I am tried this click Here for select the video from media but it not working for me...
var pictureSource;
var destinationType;
var mediaType;
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
pictureSource = navigator.camera.PictureSourceType;
destinationType = navigator.camera.DestinationType;
mediaType = navigator.camera.MediaType;
}
navigator.camera.getPicture(onPhotoURISuccess, onFail, {
destinationType: destinationType.FILE_URI,
mediaType: mediaType.VIDEO,
sourceType: source
});
function onPhotoURISuccess(imageURI) {
console.log(imageURI);
}
function onFail(message) {
console.log(message);
}
i am used this same code to implement in my app but it can't come....
You can try the snippet below:
navigator.camera.getPicture(onSuccess, onFail, { quality: 100,
destinationType: Camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
mediaType: Camera.MediaType.VIDEO
});
Not that the mediaType can be:
Camera.MediaType = {
PICTURE: 0, // allow selection of still pictures only. DEFAULT. Will return format specified via DestinationType
VIDEO: 1, // allow selection of video only, WILL ALWAYS RETURN FILE_URI
ALLMEDIA : 2 // allow selection from all media types
For reference read this.
I am implementing a photo upload feature in my application,
user can upload a photo in two different ways, using the camera or photo album.
Main problem is when I open the camera or photo album the app is restarted.
I used different foreground camera plugins but problem is not solved.
When the camera or album opens, the app automatically pause and resume,
I'm already using resume event in my app, when app resumes opens the home page.
I need, after finishing image upload, to go to the previous page and not open the home page.
I'm using cordova 3.6.4 version.
function captureImage() {
navigator.device.capture.captureImage(captureSuccess, captureError, {limit: 1
});
//window.history.back();
}
function captureSuccess(mediaFiles) {
//alert("###1");
var i, len;
for (i = 0, len = mediaFiles.length; i < len; i += 1) {
uploadFile(mediaFiles[i]);
}
}
function uploadFile(mediaFile) {
//alert("###2");
var ft = new FileTransfer(),
path = mediaFile.fullPath,
name = mediaFile.name;
//alert("image path "+path);
ft.upload(path,
"http://my.domain.com/upload.php",
function(result) {
console.log('Upload success: ' + result.responseCode);
console.log(result.bytesSent + ' bytes sent');
},
function(error) {
alert("image upload failed");
console.log('Error uploading file ' + path + ': ' + error.code);
},
{ fileName: name });
}
I use this code (not mine) and it works well for capture photo and it doesn't restart the app :
function capturePhoto(){
navigator.camera.getPicture(uploadPhoto,null,{sourceType:1,quality:60});
}
function onPhotoDataSuccess(imageData) {
// Get image handle
//
var smallImage = document.getElementById('cameraPic');
// Unhide image elements
//
smallImage.style.display = 'block';
// Show the captured photo
// The inline CSS rules are used to resize the image
//
smallImage.src =imageData;
}
// Called when a photo is successfully retrieved
//
function onPhotoFileSuccess(imageData) {
// Get image handle
console.log(JSON.stringify(imageData));
// Get image handle
//
var smallImage = document.getElementById('cameraPic');
// Unhide image elements
//
smallImage.style.display = 'block';
// Show the captured photo
// The inline CSS rules are used to resize the image
//
smallImage.src = imageData;
}
// Called when a photo is successfully retrieved
//
function onPhotoURISuccess(imageURI) {
// Uncomment to view the image file URI
// console.log(imageURI);
// Get image handle
//
var largeImage = document.getElementById('cameraPic');
// 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 capturePhotoWithData() {
// Take picture using device camera and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 30, correctOrientation: true });
}
function capturePhotoWithFile() {
navigator.camera.getPicture(onPhotoFileSuccess, onFail, { quality:50, destinationType: Camera.DestinationType.FILE_URI, correctOrientation: true });
}
// A button will call this function
function getPhoto(source) {
// Retrieve image file location from specified source
navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 30,destinationType: destinationType.FILE_URI,
correctOrientation: true });
}
// Called if something bad happens.
//
function onFail(message) {
alert('Failed because: ' + message);
}
var pictureSource; // picture source
var destinationType; // sets the format of returned value
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
$(document).on('click','.capture_photo',function(){
navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
quality : 75,
destinationType : Camera.DestinationType.DATA_URL,
sourceType : Camera.PictureSourceType.CAMERA,
// allowEdit : true,
encodingType: Camera.EncodingType.PNG,
// targetWidth: 100,
// targetHeight: 100,
popoverOptions: CameraPopoverOptions,
saveToPhotoAlbum: false
});
});
function onPhotoDataSuccess(imageData) {
sessionStorage.setItem("img_api",imageData);
$('#captureimg').attr('src','data:image/jpeg;base64,' + imageData);
}
$(document).on('click','.select_gallery',function(){
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
encodingType: Camera.EncodingType.PNG,
destinationType: destinationType.DATA_URL,
sourceType: pictureSource.SAVEDPHOTOALBUM });
});
function onFail(message) {
alert('Failed because: ' + message);
}
Hope, it will helpful
Here is my phonegap code. This code is for taking the picture as well as save the picture also:
<!DOCTYPE html>
<html>
<head>
<title>Capture Photo and Save</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.5.0.js"></script>
<script type="text/javascript" charset="utf-8">
var pictureSource; // picture source
var destinationType; // sets the format of returned value
// Wait for Cordova to connect with the device
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is ready to be used!
function onDeviceReady() {
pictureSource = navigator.camera.PictureSourceType;
destinationType = navigator.camera.DestinationType;
}
// Called when a photo is successfully retrieved
function onPhotoDataSuccess(imageData) {
// Uncomment to view the base64 encoded image data
var date = ""
var d = new Date();
date = "" + d.getDate() + "-" + (d.getMonth() + 1) + "-"
+ d.getFullYear();
alert(date)
//alert(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;
alert("data:image/jpeg;base64," + imageData)
//This part is for saving the capture photo
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
function gotFS(fileSystem) {
alert("image/" + date + ".jpeg")
fileSystem.root.getFile("image/" + date + ".jpeg", {
create : true,
exclusive : false
}, gotFileEntry, fail);
}
function gotFileEntry(fileEntry) {
fileEntry.createWriter(gotFileWriter, fail);
}
function gotFileWriter(writer) {
var data = "data:image/jpeg;base64," + imageData;
writer.write(data);
}
function fail(error) {
alert("error")
console.log(error.code);
}
}
// Called when a photo is successfully retrieved
function onPhotoURISuccess(imageURI) {
// Uncomment to view the image file URI
// console.log(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 : 50,
destinationType : destinationType.DATA_URL
});
}
// 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 : 20,
allowEdit : true,
destinationType : destinationType.DATA_URL
});
}
// A button will call this function
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);
}
function savePhoto(source) {
}
</script>
</head>
<body>
<button onclick="capturePhoto();">Capture Photo</button>
<br>
<button onclick="capturePhotoEdit();">Capture Editable Photo</button>
<br>
<button onclick="savePhoto();">Save The Photo In Server</button>
<br>
<button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From
Photo Library</button>
<br>
<button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From
PhotoAlbum</button>
<br>
<img style="display: none; width: 60px; height: 60px;" id="smallImage"
src="" />
<img style="display: none;" id="largeImage" src="" />
</body>
</html>
I am taking a picture and trying to save it like this but it is saving as a file not as a picture(binary).so after saving the picture its not opening.How can i save it with proper fromat so that i can open it as a picture ?
I did it this way:
function capturePhoto() {
// Take picture using device camera and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
destinationType: Camera.DestinationType.FILE_URI, });
}
function onPhotoDataSuccess(imageURI) {
var gotFileEntry = function(fileEntry) {
//alert("got image file entry: " + fileEntry.fullPath);
var gotFileSystem = function(fileSystem) {
fileSystem.root.getDirectory("MyAppFolder", {
create : true
}, function(dataDir) {
var d = new Date();
var n = d.getTime();
//new file name
var newFileName = n + ".jpg";
console.log("Saved image" + dataDir);
// copy the file
fileEntry.moveTo(dataDir, newFileName, null, fsFail);
}, dirFail);
};
// get file system to copy or move image file to
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFileSystem,
fsFail);
};
// resolve file system for image
window.resolveLocalFileSystemURI(imageURI, gotFileEntry, fsFail);
// file system fail
var fsFail = function(error) {
alert("failed with error code: " + error.code);
};
var dirFail = function(error) {
alert("Directory error code: " + error.code);
};
}
Hope it helps you!
If you are ok to save image in photo gallery, then try following code :
function capturePhoto() {
// Take picture using device camera and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
quality: 50,
destinationType : destinationType.FILE_URI,
saveToPhotoAlbum : true,
});
}
function save(){
document.addEventListener("deviceready", onDeviceReady, false);
}
// PhoneGap is ready
//
function onDeviceReady() {
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
}
function gotFS(fileSystem) {
fileSystem.root.getFile("pic.jpg", {create: true, exclusive: false}, gotFileEntry, fail);
}
function gotFileEntry(fileEntry) {
fileEntry.createWriter(gotFileWriter, fail);
}
function gotFileWriter(writer) {
var photo = document.getElementById("image");
writer.write(photo.value);
}
function fail(error) {
console.log(error.code);
}
How can I specify the name and destination of captured photo using Phonegap? Couldn't find this info anywhere. Right now it just goes to /sdcard/pic.jpg.
Here's what I have so far:
function capturePhoto() {
navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
destinationType: Camera.DestinationType.FILE_URI });
function onSuccess(imageURI) {
var image = document.getElementById('myImage');
image.style.display = 'block';
image.src = imageURI;
}
function onFail(message) {
alert('Failed because: ' + message);
}
}
try content://media/external/images/media/n
where n is the image number you are trying to call (1,2,3, etc)