I'm trying to let user to select image from gallery on my ionic native app, code works on IOS but on android when select Choose Image nothing happend, can't see a error on logcat.
My method:
accessGallery(){
this.camera.getPicture({
sourceType: this.camera.PictureSourceType. SAVEDPHOTOALBUM,
destinationType: this.camera.DestinationType.DATA_URL,
quality: 10
}).then((imageData) => {
this.sanitizeImage('data:image/jpeg;base64,' + imageData);
}, (err) => {
console.log(err);
this.showAlert("Cannot Access Gallery", err);
});
}
Any help or suggestion would be greatly appreciated.
This works for me in Android.
const options: CameraOptions = {
quality: 10
, destinationType: this.camera.DestinationType.DATA_URL
, mediaType: this.camera.MediaType.PICTURE // Try this
, sourceType: this.camera.PictureSourceType.PHOTOLIBRARY
};
The only difference is that I don't sanitize the text when I get the result.
I just do this.myPicture = image64;
Try with that and tell me how it goes.
Related
I'm currently developing a Android app where the user can take his or hers picture and upload it to a PATCH API endpoint that would listen to the key 'avatar'.
I'm using the Cordova Camera and the Advanced HTTP plugin to handle it.
Below is the function that triggers when taking a photo.
takePicture() {
const options: CameraOptions = {
quality: 50,
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
correctOrientation: true, // Corrects Android orientation quirks
allowEdit: false, // Post process aanpassingen
sourceType: this.camera.PictureSourceType.CAMERA // Pak de selfie camera
};
this.camera.getPicture(options).then((imageData) => {
const formData = new FormData();
formData.append('avatar', imageData, 'pic.jpg');
this.web.updateUserInfo(formData).subscribe(() => {});
}, (err) => {
console.error('Camera Error: ' + err);
});
}
Here is the API handling
updateUserInfo(newData: any) {
return new Observable((obs) => {
this.http2.patch('localhost/user', {newData}, {
'X-Subdomain': 'host',
'X-Token': this.apiKey,
}).then(() => {console.log('Camera API success!'); obs.next(); }).catch(error => {
console.error(error);
});
});
}
No errors are being given out so it is hard for me to see where the issue is. I have little experience working with Cordova and Ionic so this is all new to me.
Problem is destinationType: this.camera.DestinationType.FILE_URI,
you are sending, file url over http and not the base64 of image
Change your destination type:
destinationType: this.camera.DestinationType.DATA_URL,
DATA_URL Return base64 encoded string. DATA_URL can be very memory intensive and cause app crashes or out of memory errors. Use FILE_URI or NATIVE_URI if possible
UPDATE
In this video you can check how to send base64 to api as File
https://www.youtube.com/watch?v=tph5Nk4Ab1g
I have developed an android application using Ionic4. I am facing some issues with Ionic Native Camera plugin. The following is my code. The issues that i am facing is given below. The version if camera plugin i am using is "#ionic-native/camera": "^5.3.0",.
Issues
Gallery is not opening
Captured image is not returning.
Application crashes after taking picture
html
<img [src]="studentImage!==null ? studentImage: 'assets/icon/ic_avatar.png'" class="add-picture" (click)="addImage()">
.ts
public addImage() {
this.genericServices.presentActionSheet(this.openGallery, this.openCamera);
}
private openCamera = () => {
this.studentImage = this.genericServices.selectPicture('camera');
console.log('Captured Image:=>' + this.studentImage);
}
private openGallery() {
this.studentImage = this.genericServices.selectPicture('gallery');
}
service
public async selectPicture(source) {
let base64Image = null;
const cameraOptions: CameraOptions = {
quality: 75,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.PNG,
mediaType: this.camera.MediaType.PICTURE,
sourceType: source === 'camera' ? this.camera.PictureSourceType.CAMERA : this.camera.PictureSourceType.PHOTOLIBRARY,
correctOrientation: true
};
await this.camera.getPicture(cameraOptions).then((imageData) => {
console.log('Returned Image=>' + base64Image);
return base64Image = 'data:image/jpeg;base64,' + imageData;
}).catch(() => {
});
}
Hard to say what your problem is. I would probably write the code slightly different, like this:
async selectImage() {
const actionSheet = await this.actionCtrl.create({
header: "Select Image source",
buttons: [{
text: 'Load from Library',
handler: () => {
this.takePicture(this.camera.PictureSourceType.PHOTOLIBRARY);
}
},
{
text: 'Use Camera',
handler: () => {
this.takePicture(this.camera.PictureSourceType.CAMERA);
}
},
{
text: 'Cancel',
role: 'cancel'
}
]
});
await actionSheet.present();
}
And then in the takePicture() method decide what destinationType should be, default is FILE_URI (1).
takePicture(sourceType: PictureSourceType) {
var options: CameraOptions = {
quality: 80,
sourceType: sourceType,
saveToPhotoAlbum: false,
correctOrientation: true,
destinationType: 1,
targetWidth: 1240,
targetHeight: 768,
};
this.camera.getPicture(options)
.then((imageData) => {
// do something with the imageData, should be able to bind it to a variable and
// show it in your html file. You might need to fix file path,
// remember to import private win: any = window, and use it like this.
this.imagePreview = this.win.Ionic.WebView.convertFileSrc(imageData);
}).catch((err) => {
console.warn("takePicture Error: " + err);
});
}
This should work fine... i just tested it. But as i said, there could be several things wrong with your setup. Hope it helps in one way or another... otherwise create a fiddle, and i will gladly look at the code for you.
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 am using the camera plugin for my Ionic application.
The camera is working fully when I try the browser application on the device, yet when I build and run the APK on my device the getPicture method is not fired.
$scope.takePictureBack = function () {
$ionicPlatform.ready(function () {
var cameraOptions = {
quality: 100,
targetHeight: 1080,
targetWidth: 1920,
destinationType: Camera.DestinationType.DATA_URL
};
var success = function (data) {
$scope.$apply(function () {
/*
remember to set the image ng-src in $apply,
i tried to set it from outside and it doesn't work.
*/
$scope.cameraPicBack = "data:image/jpeg;base64," + data;
});
};
var failure = function (message) {
};
//call the cordova camera plugin to open the device's camera
navigator.camera.getPicture(success, failure, cameraOptions);
})
};
I have tried testing with logs, and it seems that neither the failure callback or the success callback of the methods are reached.
Does anyone know of any complications with the camera plugin.
For the record my cordova and ionic is updated, and I am testing on a Galaxy s6 edge plus, with Android 6.0.1.
Please use this code i had tested it on android device. it working as per your need.Simply you have to increase the camera option . Here are the options.
quality: 75,
destinationType: Camera.DestinationType.DATA_URL,
sourceType: Camera.PictureSourceType.CAMERA,
allowEdit: true,
encodingType: Camera.EncodingType.JPEG,
targetWidth: 300,
targetHeight: 300,
popoverOptions: CameraPopoverOptions,
saveToPhotoAlbum: false
Futher if you have any query please feel free to contact me.
I would like the user to be able to either take a picture or select an image from his phone's gallery.
I successfully manage to take a picture and get the imageURI.
I'm using Genymotion as emulator since i need to access to some functionalities such as camera. I know there are some other solutions. It is a little bit hard to debug while emulating but this is the only way i found to access to the camera for now. Therefor i can't see what is going on on the second part (Select an image from Gallery).
$scope.uploadPopup = function() {
var uploadPopup = $ionicPopup.show({
title: "Edit profile's picture",
templateUrl: 'templates/partials/upload-img.html',
buttons: [
{
text: '',
type: 'button-energized icon-center ion-ios7-camera',
onTap: function(e) {
// e.preventDefault() will stop the popup from closing when tapped.
e.preventDefault();
alert('Getting camera');
Camera.getPicture({
quality: 100,
saveToPhotoAlbum: false
}).then(function(imageURI) {
alert(imageURI);
$scope.lastPhoto = imageURI;
}, function(err) {
alert(err);
});
}
},
{
text: 'From gallery',
type: 'button',
onTap: function(e) {
e.preventDefault();
alert('Getting gallery');
Camera.getPicture({
quality: 100,
sourceType: Camera.PictureSourceType.PHOTOLIBRARY
}).then(function(imageURI) {
alert(imageURI);
$scope.lastPhoto = imageURI;
}, function(err) {
alert(err);
});
}
}
]
});
};
Service :
app.factory('Camera', ['$q', function($q) {
return {
getPicture: function(options) {
var q = $q.defer();
navigator.camera.getPicture(function(result) {
// Do any magic you need
q.resolve(result);
}, function(err) {
q.reject(err);
}, options);
return q.promise;
}
}
}]);
Is it the correct way to do? Any hints or ideas?
UPDATE :
When i add :
sourceType: Camera.PictureSourceType.CAMERA
to the first function (take a picture from camera). It does not work any more. While without (using the default one probably) it does work.
When i added the sourceType instead of using the default sourceType(CAMERA)
sourceType: Camera.PictureSourceType.CAMERA
It was not working anymore so i guessed something was wrong here.
The correct syntax is :
navigator.camera.PictureSourceType.CAMERA
OR (with different option) :
navigator.camera.PictureSourceType.PHOTOLIBRARY
Not sure why "navigator.camera" and not "Camera", i'm guessing "Camera" is an alias of "navigator.camera".
I think your code is on the right track, like you said it is hard to tell without being able to test it on a device. So i can help you there. go grab the intel xdk https://software.intel.com/en-us/html5/tools. import your ionic project, then make an account. after you log in go to the test tab and push your app to a test server. Then install the intel app preview on your phone/tablet (is on android and ios). open the app, log in, and hit server apps at the bottom, you will see your app and be able to run it on your phone. You can also use the intel xdk to run an app on your phone with live debugging. Hope this helps! cheers!
Here is the code for my ngCordova plugin:
//opens up the phones camera in order to take a picture
//requires module ngCordova and the method $cordovaCamera
//sets Data.Image to a base 64 string
$scope.takePhoto = function () {
document.addEventListener("deviceready", function () {
var options = {
quality: 100,
destinationType: Camera.DestinationType.DATA_URL,
sourceType: Camera.PictureSourceType.CAMERA,
allowEdit: false,
encodingType: Camera.EncodingType.PNG,
targetWidth: 800,
targetHeight: 1100,
popoverOptions: CameraPopoverOptions,
saveToPhotoAlbum: false
};
$cordovaCamera.getPicture(options).then(function (imageData) {
$scope.image = "data:image/png;base64," + imageData;
}, function (err) {
// error
});
}, false);
};