Steps :
Click on camera button in app then camera open
take picture front/back picture dsiplay
selection option cancel or ok then I have click ok
app restart (means app open from start page with splase screen)
Notes :
My android version 11 [I am testing this code in android 11(MI device) and android 10(Motorola) devices]
All the permissions of camera access is 100% set.
The issue doesn't come in Android 10.
The issues comes in just Android 11.
This is my Code snippet
const options: CameraOptions = {
quality: 100,
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE
}
this.camera.getPicture(options).then((imageData) => {
console.log("imageData ===> ",imageData);
// imageData is either a base64 encoded string or a file URI
// If it's base64 (DATA_URL):
let base64Image = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
console.log("errr",err);
this.utilServices.openForSuccessError({ value: false, message1: err});
// Handle error
});
Related
I have an app that allows a user to select a photo from the gallery or take a photo via camera. I am trying to display an image that was taken via camera and it works fine, it returns a file path like
file:///Users/ray/Library/Developer/CoreSimulator/Devices/C8202B3B-300B-4819-8CD3-4C4AA690CE7C/ data/Applications/D82BF64E-6DD1-4645-B637-BCF65001FD29/tmp/cdv_photo_003.jpg
but when I try to select a photo from a gallery it shows a broken image thumbnail, and it turns a file path like.
content://com.android.providers.media.documents/document/image%3A21
Ionic CLI Version: PRO 4.2.1
Cordova Verion: 8.0.0
NPM Version: 6.4.1
Node.js version: 8.11.3
Platform: Android
I've also tried searching for a solution but it didn't work or I am still doing something wrong
Unable to load image when selected from the gallery on Android in phonegap
https://www.raymondcamden.com/2014/10/10/Cordova-the-Camera-plugin-AngularJS-and-Ninja-Cats
ionic cordova : how to display an image in img tag from android gallery when i get content:// url from filechooser plugin
Unable to load image when selected from the gallery on Android 4.4 (KitKat) using PhoneGap Camera Plugin
Some of them suggests using this code
if (imageURI.substring(0,21)=="content://com.android") {
photo_split=imageURI.split("%3A");
imageURI="content://media/external/images/media/"+photo_split[1];
}
but this solution is not that robust cause not all of the image sources returns the same file path that contains 'content://com.android' like the photos that came from Google Photos which returns 'content://com.google.android'
_Some of them also suggests using DATA_URL on destination type but it is memory intensive and may cause the app to crash_
Here is my code:
TS file
selectImage(sourceType) {
const options: CameraOptions = {
quality: 100,
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
saveToPhotoAlbum: true,
sourceType: sourceType
}
this.camera.getPicture(options).then((imageData) => {
let base64Image = 'data:image/jpeg;base64,' + imageData;
this.imagePreview = imageData;
}, (err) => {
this.toastCtrl.presentToast(err);
});
}
HTML File
<img src="{{imagePreview}}" />;
I hope someone could help me with this. Thank you in advance 💖.
ts:
public base64Image:string;
public getImage(){
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) => {
this.base64Image = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
// Handle error
});
}
html:
<imge src={{base64Image}} />
Give this a try:-
//From Gallery
ChooseGallery() {
var _self=this;
const options: CameraOptions = {
allowEdit: true,
correctOrientation: true,
quality: 100, // picture quality
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.JPEG,
sourceType: this.camera.PictureSourceType.SAVEDPHOTOALBUM
}
this.camera.getPicture(options).then((ImageData) => {
_self.base64value = ImageData;
})
}
From Camera
ChooseCamera() {
var _self=this;
const options: CameraOptions = {
allowEdit: true,
correctOrientation: true,
quality: 100, // picture quality
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE
}
this.camera.getPicture(options).then((ImageData) => {
_self.base64value = ImageData;
})
}
I hope this helps! Thanks!
Solved my problem using DomSanitizer https://devfanaticblog.com/working-with-camera-in-ionic-2-and-ionic-native/
let options: CameraOptions = {
quality: 100,
sourceType: this.camera.PictureSourceType.SAVEDPHOTOALBUM,
saveToPhotoAlbum: true,
correctOrientation: true,
encodingType: this.camera.EncodingType.JPEG,
destinationType: this.camera.DestinationType.FILE_URI
};
this.camera.getPicture(options).then((imageData) => {
let photo_split=imageData.split("%3A");
let photo_split2=photo_split[0].split("?");
let filename = photo_split2[0].substring(photo_split2[0].lastIndexOf('/')+1);
let path = photo_split2[0].substring(0,photo_split2[0].lastIndexOf('/')+1);
alert(photo_split2[0])
alert(filename)
alert(path)
this.file.readAsDataURL(path, filename).then(res=> {
alert("FUNCIONA!")
this.imageURI = res;
}).catch((reason) => {
alert(JSON.stringify(reason));
});
}).catch((reason) => {
alert(JSON.stringify(reason));
});
//HTML
<img alt="uploaded Image" [src]="imageURI">
How do you display a FILE_URI image taken by the user using #ionic-native/camera in Ionic 3?
I can use Ionic Native's Camera to get a FILE_URI image URL, with a result like this:
file:///var/mobile/Containers/Data/Application/XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXX/tmp/cdv_photo_005.jpg
However, When I try to display this image back to the user by referring to the URI in my view template, the image never loads.
Things I've tried:
-Using the image URI directly in the view
<img src="{{profile.image}}"> // Never loads
-Sanitizing the URI by including DomSanitizer in the page component:
<img [src]="domSanitizer.bypassSecurityTrustUrl(profile.image)"> // Never loads
I would rather not use a base64 image because of the performance drag. What am I doing wrong here?
import { normalizeURL } from 'ionic-angular'; ionic3 <img> tag src
<img *ngIf="base64Image" src="{{base64Image}}"/>
openCamera(pictureSourceType: any) {
let options: CameraOptions = {
quality: 95,
destinationType: this.camera.DestinationType.FILE_URI,
sourceType: pictureSourceType,
encodingType: this.camera.EncodingType.PNG,
targetWidth: 400,
targetHeight: 400,
saveToPhotoAlbum: true,
correctOrientation: true
};
this.camera.getPicture(options).then(imageData => {
if (this.platform.is('ios')) {
this.base64Image = normalizeURL(imageData);
// Alternatively if the problem only occurs in ios and normalizeURL
// doesn't work for you then you can also use:
// this.base64Image= imageData.replace(/^file:\/\//, '');
}
else {
this.base64Image= "data:image/jpeg;base64," + imageData;
}
}, error => {
console.log('ERROR -> ' + JSON.stringify(error));
});
}
Hi try to use File Path ionic plugin
path = "file:///var/mobile/Containers/Data/Application/XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXX/tmp/cdv_photo_005.jpg";
this.filePath.resolveNativePath(path)
.then(filePath => console.log(filePath))
.catch(err => console.log(err));
Please read the documentation
https://ionicframework.com/docs/native/file-path/
You can use the below code for display the image
savePhotoClick = () =>{
const options: CameraOptions = {
quality: 70,
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 (DATA_URL):
this.base64Image = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
// Handle error
});
Then use the img tag for display
<img [src]="base64Image" *ngIf="base64Image" />
I am using IONIC 3.7.0 in my current project. In one requirement I need to use cordova camera plugin to take photo uri from image gallery. Every time when I am trying to get the URI , I get the data_uri which is base64 long string.
I only need the file_uri of image to go further. Please suggest.
var options = {
sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
destinationType: Camera.DestinationType.FILE_URI
};
Camera.getPicture(options)
.then((imageData) => {
console.log(imageData);
this.fileToUpload = imageData;
const base64Image = "data:image/jpeg;base64," + imageData;
this.preloadImage._img.src = base64Image;
this.codeservice.doProfileImageUpload(base64Image)
.subscribe(res => {
if(res.length()>0){
console.log('updated');
}
})
}, (err) => {
console.log(err);
});
I'm using the $ cordovaCamera plugin, and I want to detect when the user cancels the photo. When I run the device's native camera, there are 2 options, save or cancel the photo. I want it when I choose the option of not saving the photo, ie canceling it, i need put a code instruction, for example a $state.go()
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
};
//this metod only works when the photo is taken
$cordovaCamera.getPicture(options).then(function (imageData) {
}, function (err) {
});
I want to upload image, to Cloudinary, taken directly from camera in Ionic using cordova camera plugin. I am getting an error of code 1, having message "upload preset must be in whitelist for unsigned uploads."
How to solve this error.Please help.
my edited js code is:
$scope.cameraopen = function(){
var options = {
quality : 100,
destinationType : Camera.DestinationType.FILE_URI,//FILE_URI
sourceType : Camera.PictureSourceType.CAMERA,
allowEdit : false,
encodingType: Camera.EncodingType.JPEG,
popoverOptions: CameraPopoverOptions,
targetWidth: 500,
targetHeight: 500,
saveToPhotoAlbum: true
};
$cordovaCamera.getPicture(options).then(function(imageData) {
var Uploadoptions = {
upload_preset: cloudinary.config().upload_preset,
tags: 'mytag',
context: 'photo=photo',
file: imageData
};
var onUploadSuccess = function(data){
console.log("success"+JSON.stringify(data));
}
var onUploadFail = function(e){
console.log("error"+JSON.stringify(e));
}
var ft = new FileTransfer();
ft.upload(imageData, "http://api.cloudinary.com/v1_1/" + cloudinary.config().cloud_name + "/upload", onUploadSuccess, onUploadFail, Uploadoptions, true);
}, function(err) {
// error
});
}
First, you need to enable unsigned uploading for your Cloudinary account from the Upload Settings page.
Please refer the blog post on direct uploads from the browser and check. It can happen if some data necessary for the POST request is missing.
Yes, You need to go Cloudinary > Setting > Upload > Presets
then click edit and change into **UnSigned Upload **
Then Your Error 100% resolved. Please support us for work.