I use the native plugin http://ionicframework.com/docs/native/camera/ to access the Camera or Photo Gallery.
I need a solution to access the camera and switch to the photo gallery if necessary.
Is there such a plug-in or not?
As Swapnil Patwa says in the comment, you can ask the user with an ActionSheet:
public showActionSheet() {
let actionSheet = this.actionSheetCtrl.create({
buttons: [{
text: 'Load from gallery',
handler: () => {this.loadImage(this.camera.PictureSourceType.PHOTOLIBRARY);}
},{
text: 'Take a photo',
handler: () => {this.loadImage(this.camera.PictureSourceType.CAMERA);}
},{
text: 'Cancel',
role: 'cancel'
}]
});
actionSheet.present();
}
private loadImage(selectedSourceType:number){
let cameraOptions: CameraOptions = {
sourceType: selectedSourceType,
destinationType: this.camera.DestinationType.DATA_URL,
quality: 100,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
correctOrientation: true,
}
this.camera.getPicture(cameraOptions).then((imageData) => {
if(imageData!=null){
// Do with the image data what you want.
}
});
}
Related
Nothing happens when I call the getPicture function with: this.camera.PictureSourceType.PHOTOLIBRARY.
Hower it does work in Android just not iOs and also this.camera.PictureSourceType.CAMERA does work in iOs.
private cameraOptions: CameraOptions = {
quality: 50,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
};
public async changeProfilePicture() {
const sheet = await this.actionSheet.create({
buttons: [{
text: 'Camera',
handler: () => {
this.takePicture();
},
},
{
text: 'Foto album',
handler: () => {
this.choosePicture();
},
}
, {
text: 'Annuleren',
role: 'cancel',
handler: () => {
sheet.dismiss();
},
}],
});
sheet.present();
}
private async takePicture() {
try {
const image = await this.camera.getPicture({
...this.cameraOptions,
sourceType: this.camera.PictureSourceType.CAMERA,
});
this.userService.editProfilePicture(`data:image/jpeg;base64,${image}`).subscribe(user => {
this.user = user;
});
} catch (err) {
this.handleImageError(err);
}
}
private async choosePicture() {
try {
const image = await this.camera.getPicture({
...this.cameraOptions,
sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
});
this.userService.editProfilePicture(`data:image/jpeg;base64,${image}`).subscribe(user => {
this.user = user;
});
} catch (err) {
this.handleImageError(err);
}
}
iOS requires permissions to be configured when accessing certain native features. In your case, you need to set the NSPhotoLibraryUsageDescription key in the Info.plist file of your app. You can manually edit this file within the xcode project, but it's better to place this in the config.xml of your ionic project :
<config-file parent="NSPhotoLibraryUsageDescription" platform="ios" target="*-Info.plist">
<string>The app needs access to your library to...</string>
</config-file>
[enter image description here][1]I was using facing issue while open camera using action sheet and getting following error.
CameraProxy.js:105 Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.
at successCallback (CameraProxy.js:105)
My ionic camera version is "#ionic-native/camera": "^4.3.0".
Is there an issue with actionsheet or native plugin?
My camera is getting started but not working.
The below was typescript code for camera
const actionSheet = this.actionSheetController.create({
title: 'Actions',
buttons: [{
text: 'upload',
role: 'destructive',
icon: 'upload',
handler: () => {
console.log('camera clicked');
const options: CameraOptions = {
quality: 100,
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
};
this.camera.getPicture(options).then((imageData) => {
this.ProfileInfo.profileImagePath = 'data:image/png;base64,' + imageData;
this.ProfileInfo.profileimage = imageData;
this.updateImage(this.ProfileInfo);
}, (err) => {
});
}
}, {
text: 'camera',
icon: 'camera',
handler: () => {
console.log('camera clicked');
const options: CameraOptions = {
quality: 100,
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
sourceType: this.camera.PictureSourceType.CAMERA
};
this.camera.getPicture(options).then((imageData) => {
this.ProfileInfo.profileImagePath = 'data:image/png;base64,' + imageData;
this.ProfileInfo.profileimage = imageData;
this.updateImage(this.ProfileInfo);
}, (err) => {
});
}
}, {
text: 'Cancel',
icon: 'close',
role: 'cancel',
handler: () => {
console.log('Cancel clicked');
}
}]
});
actionSheet.present();
I am working with ionic 3 framework.and i don't know how to convert base64 image to blob Thank you.
.ts file
openCamera() {
let actionSheet = this.actionSheetCtrl.create({
title: 'Edit Your Profile Picture',
buttons: [
{
text:'Camera',
icon: 'ios-camera',
role: 'destructive',
handler: () => {
const options: CameraOptions = {
quality: 100,
destinationType: this.camera.DestinationType.DATA_URL,
saveToPhotoAlbum: true,
mediaType: this.camera.MediaType.PICTURE
}
this.camera.getPicture(options).then((imageData) => {
this.image = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
alert(err)
});
}
},
{
text: 'Gallery',
icon: 'ios-images',
handler: () => {
const options: CameraOptions = {
quality: 50,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
correctOrientation: true,
sourceType:this.camera.PictureSourceType.PHOTOLIBRARY,
}
this.camera.getPicture(options).then((imageData) => {
// imageData is either a base64 encoded string or a file URI
// If it's base64 (DATA_URL):
this.image = 'data:image/jpeg;base64,' + imageData;
//this.image = base64Image;
// alert(base64Image);
}, (err) => {
// Handle error
console.log(err);
});
}
},
{
text: 'Cancel',
role: 'cancel',
handler: () => {
}
}
]
});
actionSheet.present();
}
.html file
<img (click)="openCamera()" [src]="domSanitizer.bypassSecurityTrustUrl(image)" class="before-img" >
Default setting is the file URI (blob) according to this:
https://ionicframework.com/docs/native/camera/#CameraOptions
So you can alter your current options here to request FILE URI instead of DATA URL (as your current options set to use DATA URL which is base64):
const options: CameraOptions = {
quality: 50,
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
correctOrientation: true,
sourceType:this.camera.PictureSourceType.PHOTOLIBRARY,
}
You can also omit setting this explicitly and then in theory the default will be used...
The following ion-alert would be exactly what we need if the input was replaced with a textarea; however, ion-alert doesn't support ion-textarea.
How can the exact same look and feel be implemented with an ion-modal?
We are using Ionic without Angular (Ionic core).
ion-alert code
const alert = await alertController.create({
header: 'Would you be willing to leave feedback?',
inputs: [
{
placeholder: 'enter text'
}],
buttons: [
{
text: 'Cancel',
role: 'cancel',
cssClass: 'secondary',
handler: _ => {
alert.dismiss();
console.log('cancel');
}
}, {
text: 'Submit',
handler: _ => {
alert.dismiss();
console.log('submit');
}
}
]
});
alert.present();
attempted ion-modal code
const modalController = $('ion-modal-controller')[0];
await modalController.componentOnReady();
const modalElement = await modalController.create({
showBackdrop: true,
component:
$(`<div>
<h2>Would you be willing to provide feedback?</h2>
<div>
<ion-button>Cancel</ion-button>
<ion-button>Submit</ion-button>
</div>
</div>`)[0]
});
await modalElement.present();
In the page where you call the modal:
async book() {
const modal = await this.modalController.create({
component: BookModal,
componentProps: { value: 123 },
showBackdrop: true,
backdropDismiss: true,
cssClass: ['booking-modal']
});
return await modal.present();
}
The key point is the cssClass. Then in theme/variable.scss, add the class at the end of the file like below:
.booking-modal {
--height: 50% !important;
}
** Note: this might not be the correct way to do it, but it works for me at this stage. Looking for a better solution.
I have implemented ionic inapp browser in my app. I want to hide the top bar from it. I am trying using the below code but it does not seem to work.
page.ts code
openWebpage(url: string) {
const browser = this.inAppBrowser.create('http://sco7.com/filemanager/sapphire/','_self','toolbar=no');
const options: InAppBrowserOptions = {
zoom: 'no',
location: 'no',
toolbar: 'no'
}
}
I have added toolbar=no but still top address bar is visible.
The code you shared is the code you use to create an inAppBrowser? If so you need to declare your options const before the creation of your inAppBrowser:
openWebpage(url: string) {
const options: InAppBrowserOptions = {
zoom: 'no',
location: 'no',
toolbar: 'no'
};
const browser = this.inAppBrowser.create('http://sco7.com/filemanager/sapphire/','_self','toolbar=no');
}
Doing so i was able to open and an browser window without the URL bar.
Also using 'toolbar=no' is wrong since toolbar is one of the options property and it needs to be a string, toolbar doesn't need to be part of the string. An alternative is using simply an object with the location property:
this.inAppBrowser.create('http://sco7.com/filemanager/sapphire/','_self',{ toolbar: 'no'});
Hope this helps.
openWebpage(url: string) {
const options: InAppBrowserOptions = {
zoom: 'no',
fullscreen: "yes",
hidenavigationbuttons: "no",
toolbar:'no',
hideurlbar: 'yes',
}
// Opening a URL and returning an InAppBrowserObject
const browser = this.inAppBrowser.create(url, '_blank',{ toolbar: 'no', hideurlbar: 'yes',
fullscreen: "yes",location:"no", options});
browser.on('loadstop').subscribe(event => {
browser.insertCSS({ code: "toolbar{display: none;" });
});
// Inject scripts, css and more with browser.X
}
like this way shall appear what you wanna hidden or control!
Either you can apply InAppBrowserOptions in in-app-browser
private openBrowser(url: string, title?: string) {
let options: InAppBrowserOptions = {
toolbarcolor: "#488aff",
hideurlbar: "yes",
closebuttoncolor: "#fff",
navigationbuttoncolor: "#fff"
};
const browser = this.iab.create(url, "_blank", options);
}
or you can use the highly customizable themeable-browser which built on top of
in-app-browser
// can add options from the original InAppBrowser in a JavaScript object form (not string)
// This options object also takes additional parameters introduced by the ThemeableBrowser plugin
// This example only shows the additional parameters for ThemeableBrowser
// Note that that `image` and `imagePressed` values refer to resources that are stored in your app
const options: ThemeableBrowserOptions = {
statusbar: {
color: '#ffffffff'
},
toolbar: {
height: 44,
color: '#f0f0f0ff'
},
title: {
color: '#003264ff',
showPageTitle: true
},
backButton: {
image: 'back',
imagePressed: 'back_pressed',
align: 'left',
event: 'backPressed'
},
forwardButton: {
image: 'forward',
imagePressed: 'forward_pressed',
align: 'left',
event: 'forwardPressed'
},
closeButton: {
image: 'close',
imagePressed: 'close_pressed',
align: 'left',
event: 'closePressed'
},
customButtons: [
{
image: 'share',
imagePressed: 'share_pressed',
align: 'right',
event: 'sharePressed'
}
],
menu: {
image: 'menu',
imagePressed: 'menu_pressed',
title: 'Test',
cancel: 'Cancel',
align: 'right',
items: [
{
event: 'helloPressed',
label: 'Hello World!'
},
{
event: 'testPressed',
label: 'Test!'
}
]
},
backButtonCanClose: true
};
const browser: ThemeableBrowserObject = this.themeableBrowser.create('https://ionic.io', '_blank', options);