I'm using monaca ide to develop a simple app, and using the slinding menu of onsenui I found that usually when I take a photo reload the page, so the photo doesn't appear on the page. Seems to be random, sometimes happen sometimes doesn't, and I could find why. Any idea?
UPDATE:
Here you could see the controller where action is handle:
var appControllers = angular.module('appControllers', []);
appControllers
.controller('parkingCtrl', [
'$scope',
'appGlobals',
function($scope, appGlobals) {
$scope.snapPhoto = function() {
navigator.camera.getPicture (onSuccess, onFail, {
quality: 50,
destinationType: Camera.DestinationType.FILE_URI,
targetWidth: 100
});
//A callback function when snapping picture is success.
function onSuccess (imageURI) {
$scope.$apply(function(){
$scope.imageURI = imageURI;
});
}
//A callback function when snapping picture is fail.
function onFail (message) {
alert ('Error occured: ' + message);
}
}
])
I guess this happens on Android.
When you call the function to take picture, the Camera app take over, and now your app is in the background. If you take big picture and your device has small memory, your device will be in low memory state, and it has to kill some background apps to free the memory. In some case, your app is killed and when you return back from the Camera app, your app is restarted.
A work around is to limit the quality or the size of the picture.
This is the reference to the api:
http://docs.phonegap.com/en/2.9.0/cordova_camera_camera.md.html#Camera
navigator.camera.getPicture(onPhotoDataSuccess,
onFail,
{ quality: 75,
allowEdit: true,
destinationType: destinationType.DATA_URL,
targetWidth: 100,
}
);
Here is the complete options:
{ quality : 75,
destinationType : Camera.DestinationType.DATA_URL,
sourceType : Camera.PictureSourceType.CAMERA,
allowEdit : true,
encodingType: Camera.EncodingType.JPEG,
targetWidth: 100,
targetHeight: 100,
popoverOptions: CameraPopoverOptions,
saveToPhotoAlbum: false };
but your case is different..
1) your pic could be so big. so insted of just reloading the page you should hard reload that page
right click on back button
Related
I have a web site developed using React JS for Navigators, on my computer is working ok, but in a tablet I have an issue. I implemented a simple file chooser filering images only. The problem happens when I took the photo using the camera, it is the camera app in the device, but it doesn't always return to my web site the photo, sometimes there navigator is closed or sometimes a message appears that say the memory is not enough to complete the task.
The problem occurs around once per every ten photos taken, it sounds like a memory leak.
I am using the DropzoneComponent in React to load the image, here is my code:
Component:
import DropzoneComponent from 'react-dropzone-component';
Cod:
<DropzoneComponent
config={componentConfig}
eventHandlers={eventHandlers}
djsConfig={djsConfig}
/>
The configuration:
const djsConfig = {
addRemoveLinks: true,
autoProcessQueue: false,
maxFiles: 1,
maxFilesize: 1,
acceptedFiles: "image/png,image/jpeg",
dictDefaultMessage: 'Drop here the image or select',
dictFileTooBig: 'File is too big',
dictInvalidFileType: 'Invalid file',
};
const componentConfig = {
iconFiletypes: ['.jpg', '.png'],
showFiletypeIcon: true,
postUrl: 'no-url'
};
When the image is loaded I do this things to process the image, but this method is not called.
addedfile = (file) => {
alert('OLA K ASE')
this.dropzone.removeAllFiles();
Resizer.imageFileResizer(
file, //is the file of the new image that can now be uploaded...
900, // is the maxWidth of the new image
900, // is the maxHeight of the new image
'JPEG', // is the compressFormat of the new image
92, // is the quality of the new image
0, // is the rotatoion of the new image
uri => {
this.setState({ src: uri });
}, // is the callBack function of the new image URI
'base64' // is the output type of the new image
);
}
When I take a picture everything works fine. The pic is made and I see it afterwards on the page. When I click to retake the pic I can do it, but now come the problem. The old picture is placed under the first picture Ive taken. I know that bc I can see a little bit of my 2. picture laying under my first picture. To see my second picture I have take a 3. picture (second time retake picture) Now the first pic is deleted, the 2. pic is on the top and the 3. is placed under the 2. pic. How can I achieve that the pic is directly deleted when I retake a picture?
export class PostPage {
public photos: any;
public base64Image: string;
constructor(public navCtrl: NavController, private camera: Camera) {
}
ngOnInit(){
this.photos = [];
}
ionViewDidEnter(){ //Damit Kamera automatisch öffent
const options: CameraOptions = {
quality: 100,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE
}
this.camera.getPicture(options).then((imageData) => {
// imageData is either a base64 encoded string or a file URI
// If it's base64:
this.base64Image = 'data:image/jpeg;base64,' + imageData;
this.photos.push(this.base64Image);
this.photos.reverse();
}, (err) => {
// Handle error
});
}
cancel(){
const options: CameraOptions = {
quality: 100,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE
}
this.camera.getPicture(options).then((imageData) => {
// imageData is either a base64 encoded string or a file URI
// If it's base64:
this.base64Image = 'data:image/jpeg;base64,' + imageData;
this.photos.push(this.base64Image);
this.photos.reverse();
}, (err) => {
// Handle error
});
}
}
I am trying to use camera plugin with cordova app in ionic angular.js. My problem is that when i get picture it gives me a url of image not base64 string
I need base64 string.
in Services.js
.factory('Camera', function($q) {
return {
getPicture: function(options) {
var q = $q.defer();
navigator.camera.getPicture(function(result) {
q.resolve(result);
}, function(err) {
q.reject(err);
}, options);
return q.promise;
}
}
});
I user code above this returns
file:///storage/emulated/0/Android/data/com.example.app/cache/1313513121.jpg
but I want base64 string because I send it to server to save the image in server
in Controller.js
$scope.AddImage = function () {
var options = {
quality : 75,
targetWidth: 200,
targetHeight: 200,
sourceType: 1
};
Camera.getPicture(options).then(function(imageData) {
alert(imageData);
var item={
image: imageData
}
Pictures.push(item);
$scope.Photos = Pictures;
}, function(err) {
console.log(err);
});
}
I wrote code above. How can I solve this problem
Thanks in advance
Use the destinationType option parameter with value DATA_URL on the [ cameraOptions ].
navigator.camera.getPicture( cameraSuccess, cameraError, [
cameraOptions ] );
The option destinationType: Camera.DestinationType.DATA_URL will allow you to take a photo and retrieve the Base64-encoded image. Default this is set to destinationType: Camera.DestinationType.FILE_URI which will retrieve the image file location.
Below a general code sample which you can use to adapt your existing code.
navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
destinationType: Camera.DestinationType.DATA_URL
});
function onSuccess(imageData) {
var image = document.getElementById('myImage');
image.src = "data:image/jpeg;base64," + imageData;
}
function onFail(message) {
alert('Failed because: ' + message);
}
Documentation here
I am trying to save an image captured using cordova camera plugin to a specific directory for windows 8.1 application. But I am not able to find an exact solution for this. I have gone through many questions and forums, no luck.
Here is a sample code I have tried.
onTakePhoto: function () {
navigator.camera.getPicture(this.onPhotoSuccess, this.onPhotoFail, {
quality: 100,
destinationType: Camera.DestinationType.FILE_URI,
encodingType: Camera.EncodingType.JPEG,
sourceType: Camera.PictureSourceType.CAMERA,
saveToPhotoAlbum: false
});
},
//Callback function if onTakePhoto action is success.
onPhotoSuccess: function (oImageURI) {
console.log("In Success " + oImageURI);
window.resolveLocalFileSystemURI(oImageURI, this.handlePicSave, this.onPhotoFail);
},
//Callback function if onTakePhoto action fails
onPhotoFail: function (oError) {
console.log("In Fail " + oError);
},
//Handle pic save
handlePicSave: function(oEntry) {
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fileSys) {
fileSys.root.getDirectory("MyPhotos", { create: true, exclusive: false }, function (directory) {
oEntry.moveTo(directory, "WO_2.jpg", that.successMove, that.onPhotoFail);
}, that.onPhotoFail);
},
that.onPhotoFail);
},
The above code works fine and saves the image to the app root folder i.e C:\Users\..\AppData\Local\Packages\App_name\LocalState\MyPhotos\WO_2.jpg
But I need to store directly to C drive like.. C:\MyPhotos\WO_2.jpg
I think you should check cordova file plugin, It allows to access differents folders and read / write. I do not use it for camera purposes, but I used it for saving files in diferent projects and works fine.
This is probably simple and covered by some combination of functions in PhoneGap's "Camera" plugin, "File" plugin, or "File-Transfer" plugin. I understand the user can select a file with:
navigator.camera.getPicture(function (fileURI) {
// *** need help here ***
}, function ()
// handle errors
}, {
destinationType: window.Camera.DestinationType.FILE_URI,
sourceType: window.Camera.PictureSourceType.PHOTOLIBRARY,
mediaType: window.Camera.MediaType.ALLMEDIA
});
I can also change to destinationType: window.Camera.DestinationType.DATA_URL if that makes a difference.
My goal in the success handler is to get a File object (https://developer.mozilla.org/en-US/docs/Web/API/File).
Something like this should do it.
navigator.camera.getPicture(function (fileURI) {
window.resolveLocalFileSystemURL(fileURI,
function(fileEntry){
alert("got image file entry: " + fileEntry.fullPath);
// fileEntry.file() should return a raw HTML File Object
},
function(){//error}
);
}, function (){
// handle errors
}, {
destinationType: window.Camera.DestinationType.FILE_URI,
sourceType: window.Camera.PictureSourceType.PHOTOLIBRARY,
mediaType: window.Camera.MediaType.ALLMEDIA
});
window.resolveLocalFileSystemURI(fileURI, function(fileEntry) { /* your code here */ });