typescript 如何在 IONIC 3 中从图库中拍摄或选择图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47118760/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to take or choose image from gallery in IONIC 3
提问by Somnath
How to take an image from the gallery in IONIC 3?
如何从 IONIC 3 中的图库中拍摄图像？
I am failed to take image from gallery using
我无法使用从图库中获取图像
https://ionicframework.com/docs/native/camera/
https://ionicframework.com/docs/native/camera/
回答by Sampath
You can do it using Native camera plugin.
您可以使用Native camera plugin来做到这一点。
.ts
.ts
//take Photo
takePhoto(sourceType:number) {
const options: CameraOptions = {
quality: 50,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
correctOrientation: true,
sourceType:sourceType,
}
this.camera.getPicture(options).then((imageData) => {
let base64Image = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
// Handle error
});
}
Note:You just need to call above method like:
注意：你只需要调用上面的方法，如：
this.takePhoto(0);//photo library
this.takePhoto(0);//photo library
this.takePhoto(1);//camera
this.takePhoto(1);//camera
0for photo library1for Camera
0对于photo library1为Camera
UI
用户界面
回答by Yoarthur
Following the most vote answer, a quick snippets.
在投票最多的答案之后，一个简短的片段。
Define 2 options types:
定义 2 个选项类型：
private optionsCamera: CameraOptions = {
quality: 100,
targetWidth: 600,
sourceType: this.camera.PictureSourceType.CAMERA,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE
}
private optionsGallery: CameraOptions = {
quality: 100,
sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE
}
and when you call you method getPicturefrom camera
当你从相机调用getPicture方法时
replace options object for the proper situation.
在适当的情况下替换选项对象。
This is for camera
这是相机用的
this.camera.getPicture(this.optionsCamera).then((imageData) => {
let base64Image = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
// Handle error
console.log(err)
})
This is for gallery
这是画廊
this.camera.getPicture(this.optionsGallery).then((imageData) => {
let base64Image = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
// Handle error
console.log(err)
})
回答by arif malim
try this:
试试这个：
TakeCamera() {
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;
this.photos.push(this.base64Image);
this.photos.reverse();
}, (err) => {
console.log(err);
});
}
回答by Khurshid Ansari
Use image picker plugin:
使用图像选择器插件：
getImage(){
let options = {
maximumImagesCount:1//select number of image default is 15
}
this.imagePicker.getPictures(options).then((results) => {
for (var i = 0; i < results.length; i++) {
console.log('Image URI: ' + results[i]);
}
}, (err) => {
console.log("error: "+err);
});
}
Ref image picker
参考图像选择器
