如何在 IONIC 3 中从图库中获取或选择图像

Posted 2023-03-13

【中文标题】如何在 IONIC 3 中从图库中获取或选择图像

【英文标题】：How to take or choose image from gallery in IONIC 3

【发布时间】：2018-04-17 13:01:24

【问题描述】：

如何在 IONIC 3 中从图库中获取图像？

我无法使用

从图库中获取图像

https://ionicframework.com/docs/native/camera/

https://ionicframework.com/docs/native/camera-preview/

【参考方案1】：

您可以使用Native camera plugin 来完成。

.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
    );
  

注意：你只需要像这样调用上述方法：

this.takePhoto(0);//photo library

this.takePhoto(1);//camera

0 为photo library 1 为Camera

用户界面

【讨论】：

值得注意的是，那些sourceType 值可以作为常量使用，这可以使您的代码更具描述性：this.camera.PictureSourceType.CAMERA 和this.camera.PictureSourceType.PHOTOLIBRARY

如何选择多张图片？？

如何选择多张图片？？

你可以使用这个：ionicframework.com/docs/native/image-picker@AnkitMaheshwari

@Sampath - 不打开图片库（用于选择图片的文件夹），而是一起打开所有图片，这使得滚动和查找所需图片变得非常困难。

【参考方案2】：

试试这个：

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);
    );
  

【讨论】：

请使用 Markdown 格式。另外，请用英语解释为什么/如何解决问题。

【参考方案3】：

使用图片选择器插件：

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); 
);

参考image picker

【参考方案4】：

根据投票最多的答案，快速 sn-ps。

定义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
  

当你从相机中调用方法 getPicture

将选项对象替换为适当的情况。

这是相机用的

this.camera.getPicture(this.optionsCamera).then((imageData) => 
  let base64Image = 'data:image/jpeg;base64,' + imageData;
 , (err) => 
  // Handle error
  console.log(err)
 )

这是给画廊的

this.camera.getPicture(this.optionsGallery).then((imageData) => 
  let base64Image = 'data:image/jpeg;base64,' + imageData;
 , (err) => 
  // Handle error
  console.log(err)
 )