I'm using following code to choose image from gallery and getting it's File path
function getPhoto()
{
// Retrieve image file location from specified source
navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
destinationType: navigator.camera.DestinationType.FILE_URI,
sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY });
}
function onPhotoURISuccess(imageURI)
{
// console.log(imageURI);
var largeImage = document.getElementById('myImage');
largeImage.style.display = 'block';
largeImage.src = imageURI;
window.FilePath.resolveNativePath(imageURI, function(result) {
// onSuccess code
imageURI = 'file://' + result;
console.log(imageURI);
Now I want to retrieve the image from the file path "imageURI" on different view page. How to do it?
Note: Got the solution. The same code
var largeImage = document.getElementById('demoimg');
largeImage.style.display = 'block';
console.log(imageURI);
largeImage.src = imageURI;
Related
I need to upload all type of files in my application and for images I need to get image height and width and for that I am using:
$scope.uploadFile = function(){
$scope.imageUploading = true;
var options = {
quality: 70,
//~ targetWidth: 1005,
//~ targetHeight: 693,
destinationType: Camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
mediaType: Camera.MediaType.PICTURE,
correctOrientation: true
};
$cordovaCamera.getPicture(options).then(function(imageData) {
imageData = imageData.split('?');
var imageURI = imageData[0];
// This function is called once an imageURI is rerturned from PhoneGap's camera or gallery function
window.resolveLocalFileSystemURL(imageURI, function(fileEntry) {
fileEntry.file(function(fileObject){
// Create a reader to read the file
var reader = new FileReader();
// Create a function to process the file once it's read
reader.onloadend = function(evt) {
// Create an image element that we will load the data into
var image = new Image()
image.onload = function(evt) {
// The image has been loaded and the data is ready
var image_width = this.width
var image_height = this.height
if(parseInt(image_width) < confArr.image_sizes.portfolio.large.w || parseInt(image_height) < confArr.image_sizes.portfolio.large.h){
Auth.toastMessage($rootScope.appMainLang.formvalidation.upload_resolution_limit.replace('%s',parseInt(confArr.image_sizes.portfolio.large.w)),'long','center');
$scope.imageUploading = false;
$ionicLoading.hide();
}else{
$scope.imageUploading = true;
$scope.jrCrop(imageURI);
}
image = null
}
// Load the read data into the image source. It's base64 data
image.src = evt.target.result
}
// Read from disk the data as base64
reader.readAsDataURL(fileObject)
}, function(){
Auth.toastMessage("There was an error reading or processing this file.","long", "center");
})
})
}, function(err) {
$scope.imageUploading = false;
$ionicLoading.hide();
// Auth.toastMessage(Auth.getlocal("timeoutText","string"),"long", "center");
});
}
when I use
mediaType: Camera.MediaType.PICTURE,
in above code it returns path of file as "file:///storage/emulated/0/...." and is working correctly.
but as I need to upload all types of files so I replaced above line with
mediaType: Camera.MediaType.ALLMEDIA
and with this path of file becomes "/storage/emulated/0/..." and then it do not enters in "window.resolveLocalFileSystemURL" function.
So is there a way to convert this later path to above mentioned like path?
Just add the file:// to the string. Like this:
var imageURI = 'file://' + imageData[0];
I tried many ways and referred many questions here but still my camera is not launching.Help me in this.I checked manifest and config xml files.there is no error in that.Can any one give me working example for cordova camera.
<script>
var pictureSource;
var destinationType;
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;
}
function capturePhoto() {
alert("varun");
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
destinationType: destinationType.DATA_URL,
sourceType: Camera.PictureSourceType.CAMERA });
}
function onFail(message) {
alert('Failed because: ' + message);
}
</script>
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
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
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)