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.
Related
I am working on ionic v1 Camera app after setting up everything correctly (as done many times before). after building app and debugging it i got this error.
Plugin installed correctly,
ng-cordova.min included.
$CordovaCamera injected.
Here is my Code:
$scope.takePhoto = function () {
var options = {
quality: 100,
destinationType: Camera.DestinationType.DATA_URL,
sourceType: Camera.PictureSourceType.CAMERA,
allowEdit: true,
encodingType: Camera.EncodingType.JPEG,
targetWidth: 300,
targetHeight: 300,
popoverOptions: CameraPopoverOptions,
saveToPhotoAlbum: true
};
$cordovaCamera.getPicture(options).then(function (imageData) {
$rootScope.imgURI = "data:image/jpeg;base64," + imageData;
$state.go('menu.signUp');
}, function (err) {
// An error occured. Show a message to the user
});
}
functions are working fine. but camera is not opening and gives error
as seen in picture.
Try with injecting $cordovaCamera in contact controller and use it like this
camera.getPicture() //just camera instead of $cordovaCamera
Use camera.getPicture() or navigator.camera.getPicture()
https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-camera/
Make sure $cordovaCamera dependency Injected then use it like this
$cordovaCamera.getPicture(options).then(function(imageData) {
var image = document.getElementById('myImage');
image.src = "data:image/jpeg;base64," + imageData;
}, function(err) {
// error
});
I have an app to take photos and upload them when the user synchronises their app. However, it keeps giving me errors after I take the photo and doesnt save it at all to phone.
Here is my code:
(function () {
'use strict';
var serviceId = 'camera';
angular.module('app').service(serviceId, ['$cordovaCamera', '$cordovaFile', '$q', function ($cordovaCamera, $cordovaFile, $q) {
this.takePhoto = function () {
if (window.Camera) {
var options = {
quality: 75,
destinationType: Camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.CAMERA,
allowEdit: false,
encodingType: Camera.EncodingType.JPEG,
targetWidth: 800,
targetHeight: 800,
saveToPhotoAlbum: true,
correctOrientation: true
};
return $cordovaCamera.getPicture(options).then(function (imageData) {
console.log("Photo Success: " + imageData);
return imageData;
}, function (err) {
console.error("Error taking photo: " + JSON.stringify(err));
throw err;
});
} else {
var deferred = $q.defer();
deferred.resolve("/img/sunrise.jpg");
return deferred.promise;
}
}
}]);
})();
What am I doing wrong here?
First make sure that you include the Camera and File plugins in your project.If not please add this two plugins,
cordova plugin add org.apache.cordova.camera
and
cordova plugin add org.apache.cordova.file
I have made small example for you.Here I am using Ionic’s ngCordova to implement the Camera functionality,.
Conroller
$scope.photoSave = function() {
if (window.cordova) {
var options = {
quality: 100,
destinationType: Camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.CAMERA,
encodingType: Camera.EncodingType.JPEG,
cameraDirection: 1,
saveToPhotoAlbum: true
};
$cordovaCamera.getPicture(options).then(function(imagePath) {
$scope.imgURI = imagePath;
//Grab the file name of the photo in the temporary directory
var currentName = imagePath.replace(/^.*[\\\/]/, '');
//Create a new name for the photo
var d = new Date(),
n = d.getTime(),
newFileName = n + ".jpg";
//Move the file to permanent storage
$cordovaFile.moveFile(cordova.file.tempDirectory, currentName, cordova.file.dataDirectory, newFileName).then(function(success) {
//success.nativeURL will contain the path to the photo in permanent storage, do whatever you wish with it, e.g:
//createPhoto(success.nativeURL);
}, function(error) {
//an error occured
});
}, function(error) {
//An error occured
});
}
};
HTML
<ion-view>
<ion-content>
<button ng-click="photoSave()">Capture</button>
</ion-content>
</ion-view>
Refer
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.
On setting correctOrientation : true, then image rotation issue is solved and thumbnail is set - But image path is: file://storage/emulated/0/Android/data/com.examole.helloworld/modified.jpg?149028394994
Without correctOrientation: true, image path is: file:///storage/emulated/0/DCIM/Camera/1490345556009.jpg
When trying to set another image with correctOrientation: true, then the latest selected image is not set.
Following is the code for your kind reference:
navigator.camera.getPicture(captureSuccess, onFail, {quality: 50,
destinationType: Camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.SAVEDPHOTOALBUM,
mediaType: Camera.MediaType.PICTURE,
correctOrientation: true,
allowEdit: true
});
Thanks in Advance.
You can try this,
$(document).on('click','.capture_photo',function(){
navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
quality : 75,
destinationType : Camera.DestinationType.DATA_URL,
sourceType : Camera.PictureSourceType.CAMERA,
encodingType: Camera.EncodingType.PNG,
popoverOptions: CameraPopoverOptions,
saveToPhotoAlbum: false
});
});
// to call the success function of capture image(onPhotoDataSuccess)
function onPhotoDataSuccess(imageData) {
sessionStorage.setItem("img_api",imageData);
$('#captureimg').attr('src','data:image/jpeg;base64,' + imageData);
App.show_toast("Profile image updated successfully!");
}
//onfail
onFail(message) { alert('Failed because: ' + message); }
I have solved this and posted my answer
navigator.camera.getPicture(captureSuccess, onFail, {quality: 50,
destinationType: Camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.SAVEDPHOTOALBUM,
mediaType: Camera.MediaType.PICTURE,
correctOrientation: true,
});
var captureSuccess = function(mediaFiles) {
var fD = mediaFiles;
window.resolveLocalFileSystemURI(fD, function(fileEntry) {
fileEntry.file(function(fT) {
var fname = fileEntry.nativeURL.substr(fileEntry.nativeURL.lastIndexOf('/') + 1);
fileTransferUpload(fD,fname);
}, function() {
console.log('error');
});
}, onFError);
};
the method fileTransferUpload above will just set the image path in src.
in success callback function, image path is received and without getting nativeURL from this path, i have set the path itself in src.
Here's a better solution (involved a spot of digging through some Java files, but takes about 8 seconds)
in CameraLauncher.java (in the cordova-plugin-camera/src/android folder)
//Old:
String modifiedPath = getTempDirectoryPath() + "/modified"+".jpg";
this.callbackContext.success("file://" + modifiedPath + "?" + System.currentTimeMillis());
AKA just move the timestamp up in the filename.
//New:
String modifiedPath = getTempDirectoryPath() + "/modified"+ System.currentTimeMillis() +".jpg";
this.callbackContext.success("file://" + modifiedPath);
document.addEventListener("deviceready",onDeviceReady,false);
var pictureSource; // picture source
var destinationType; // sets the format of returned value
function onDeviceReady() {
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
}
sorry, you want to add this code along with the that.
Trying to create a simple app that saves a photo to the phone's Photo Gallery. The photo doesn't appear to get saved to the Gallery, but I don't have any error messages. Using steroids as well.
Here's my application.js:
function cameraGetPicture() {
navigator.camera.getPicture(imageReceived, cameraFail, {
quality: 50,
destinationType: Camera.DestinationType.FILE_URI,
allowEdit: false,
correctOrientation: true,
targetWidth: 600
});
}
function imageReceived(imageURI) {
var image = document.querySelector('img#myImage');
image.src = imageURI;
imageURI = new steroids.File({
path: "image.png",
relativeTo: steroids.app.userFilesPath
});
}
function cameraFail(message) {
alert("Camera error: " + message);
}
Just add following property to Object which you are passing to navigator.camera.getPicture()
saveToPhotoAlbum: true
Your code will look like:
navigator.camera.getPicture(imageReceived, cameraFail, {
quality: 50,
destinationType: Camera.DestinationType.FILE_URI,
allowEdit: false,
correctOrientation: true,
targetWidth: 600,
saveToPhotoAlbum: true
});
This works for me in both android & iOS. Hopefully this will work for you.