如何從IONIC 3中的圖庫中選擇圖像

Question

如何從IONIC 3中的圖庫中拍攝圖像？

我無法從圖庫中使用圖像

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

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

Answer 1

你可以使用Native相機插件來做到這一點。

.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

Camera photo library 1為0

UI

Answer 2

按照最多的投票答案，快速摘錄。

定義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)
 })

Answer 3

試試這個：

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

Answer 4

使用圖片選擇器插件：

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

參考圖像選擇器