如何将ionic中的base64图像转换为Blob

时间:2019-01-17 12:56:11

标签: ionic-framework

我正在使用ionic 3 framework。而且我不知道如何将base64图像转换为blob。谢谢。

.ts文件

openCamera() {
    let actionSheet = this.actionSheetCtrl.create({
      title: 'Edit Your Profile Picture',
      buttons: [
        {
          text:'Camera',
          icon: 'ios-camera',
          role: 'destructive',
          handler: () => {
            const options: CameraOptions = {
              quality: 100,
              destinationType: this.camera.DestinationType.DATA_URL,
              saveToPhotoAlbum: true,
              mediaType: this.camera.MediaType.PICTURE
            }

            this.camera.getPicture(options).then((imageData) => {
              this.image = 'data:image/jpeg;base64,' + imageData;

            }, (err) => {
              alert(err)
            });
          }
        },
        {
          text: 'Gallery',
          icon: 'ios-images',
          handler: () => {
            const options: CameraOptions = {
              quality: 50,
              destinationType: this.camera.DestinationType.DATA_URL,
              encodingType: this.camera.EncodingType.JPEG,
              mediaType: this.camera.MediaType.PICTURE,
              correctOrientation: true,
              sourceType:this.camera.PictureSourceType.PHOTOLIBRARY,
            }

            this.camera.getPicture(options).then((imageData) => {
              // imageData is either a base64 encoded string or a file URI
              // If it's base64 (DATA_URL):

              this.image = 'data:image/jpeg;base64,' + imageData;
              //this.image = base64Image;
             // alert(base64Image);
            }, (err) => {
              // Handle error
              console.log(err);
            });
          }
        },
        {
          text: 'Cancel',
          role: 'cancel',
          handler: () => {

          }
        }
      ]
    });

    actionSheet.present();
  }

.html文件

 <img (click)="openCamera()" [src]="domSanitizer.bypassSecurityTrustUrl(image)" class="before-img" >

1 个答案:

答案 0 :(得分:0)

默认设置是根据此设置的文件URI(blob): https://developers.google.com/actions/reference/rest/Shared.Types/OptionValueSpec

因此,您可以在此处更改当前选项以请求FILE URI而不是DATA URL(因为您当前的选项设置为使用base64的DATA URL):

const options: CameraOptions = {
              quality: 50,
              destinationType: this.camera.DestinationType.FILE_URI,
              encodingType: this.camera.EncodingType.JPEG,
              mediaType: this.camera.MediaType.PICTURE,
              correctOrientation: true,
              sourceType:this.camera.PictureSourceType.PHOTOLIBRARY,
}

您也可以省略显式设置,然后理论上将使用默认设置...