ionic3 将裁剪后的图像更改为 base64 字符串答案

【问题标题】：ionic3 change cropped image to base64 stringionic3 将裁剪后的图像更改为 base64 字符串
【发布时间】：2019-06-21 15:30:26
【问题描述】：

我正在使用 ionic3 本机裁剪图像插件，它可以工作并且具有 src 图像路径，但我需要将其更改为 base64 字符串以将其发送到服务器。怎么改，这是我的裁剪图代码，非常感谢。

        console.log('buttonCamera clicked');
        let cameraOptions = {
          sourceType: this.camera.PictureSourceType.CAMERA,
          destinationType: this.camera.DestinationType.FILE_URI,      
          quality: 100,
          targetWidth: 500,
          targetHeight: 500,
          encodingType: this.camera.EncodingType.JPEG,      
          correctOrientation: true
        }

        this.camera.getPicture(cameraOptions)
        .then(file_uri => {
           this.crop.crop(file_uri, {quality: 100})
           .then(
              newImage => {console.log('new image path is: ' + newImage);
              this.imageSrc = newImage},
              error => console.error('Error cropping image', error)
           );
        },
        err => console.log(err));

【问题讨论】：

为什么不使用 FileTransfer Ionic 原生插件作为 url 发送？
因为我有其他参数需要在一个api中一起发送
你可以使用参数检查stackoverflow.com/questions/32618984/…
嗨 suraj，感谢您的回复，所以无法将图像更改为 base64 字符串？
您最初可以通过设置this.camera.DestinationType.DATA_URI 获取图像数据，但根据您的问题，我认为链接的答案更好..

标签： typescript base64 ionic3

【解决方案1】：

只需在 cameraOption 中做些小改动：

destinationType: this.camera.DestinationType.DATA_URL

它已经完成了！

【讨论】：

【解决方案2】：

在Ionic 4中使用file原生插件调用readAsDataURL

  showCroppedImage(ImagePath){
    this.isLoading = true;
    var copyPath = ImagePath;
    var splitPath = copyPath.split('/');
    var imageName = splitPath[splitPath.length-1];
    var filePath = ImagePath.split(imageName)[0];

    this.file.readAsDataURL(filePath,imageName).then(base64=>{
        this.croppedImagepath = base64;
        this.isLoading = false;
    },error=>{
      alert('Error in showing image' + error);
      this.isLoading = false;
    });
  }

查看完整教程here

【讨论】：