如何使用离子照相机预览保存图片

时间:2019-05-02 09:58:57

标签: angular ionic-framework ionic4

我正在使用Ionic 4开发移动应用程序。一切都工作正常,但是调用函数takePicture()时无法保存图片。它是否具有Ionic Camera Plugin中的saveToPhotoAlbum之类的任何参数。帮帮我吧。

  cameraPictureOpts: CameraPreviewPictureOptions = {
    width: window.innerWidth,
    height: window.innerHeight,
    quality: 100
  }

  takePicture() {
    let result = this.cameraPreview.takePicture(this.cameraPictureOpts);
    let picture = `data:image/jpeg;base64,${result}`;
  }

2 个答案:

答案 0 :(得分:1)

离子/天然CameraPlugin .takePicture()方法返回一个promise。要获得该值,您需要稍微更改代码。

  takePicture() {
    this.cameraPreview.takePicture(this.cameraPictureOpts).then(data => {
         let picture = `data:image/jpeg;base64,` + data;
    });

  }

答案 1 :(得分:1)

您可以将图像保存在局部变量中。

selectedImage: any; 

pictureOpts: CameraPreviewPictureOptions = {
    width: 400,
    height: 400,
    quality: 85
};

............


takePicture() {
    console.log('take pinture');
    // take a picture
    this.cameraPreview.takePicture(this.pictureOpts).then((imageData) => {
      this.selectedImage = 'data:image/jpeg;base64,' + imageData;
      console.log('take picture ');
      this.location.back(); // go to previous page
    }, (err) => {
      console.log(err);
      this.selectedImage = 'assets/img/test.jpg';
    });
  }`

一旦保存在变量中,您就可以将其保存到电话中,例如使用NativeStorage

import { NativeStorage } from '@ionic-native/native-storage/ngx';

 constructor(private storage: NativeStorage) {}

saveImage() {
    this.storage.setItem('image', {property: this.selectedImage})
              .then(
                  () => {
                    console.log('Stored image!');
                  },
                  error => {
                    console.error('Error guardando la imagen', error);
                  }
          );
}