web-dev-qa-db-ja.com

IONIC 3でギャラリーから画像を取得または選択する方法

IONIC 3？でギャラリーから画像を取得する方法は？

を使用してギャラリーから画像を取得できません

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

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

angulartypescriptionic-frameworkionic2ionic3
8
Somnath

ネイティブカメラプラグイン を使用して実行できます。

。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_ for _photo library_ _1_ for Camera

[〜＃〜] ui [〜＃〜]

enter image description here

38
Sampath

ほとんどの投票の答えに続いて、簡単なスニペット。

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)
 })
2
Yoarthur

画像ピッカープラグインを使用：

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

参照 イメージピッカー

0
Khurshid Ansari

これを試して：

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);
    });
  }
0
arif malim