从ngx-image-cropper返回文件上传- Angular

Question

我正在使用ngx-image-cropper裁剪我的图像。我需要从ngx-image-cropper检索裁剪后的图像才能上传。但是，我不能通过它来检索File对象。

这是我用来在用户裁剪图像时触发的代码，

imageCropped(event: ImageCroppedEvent) {
    this.croppedImage = event.base64;
    this.cropperHeight = event.height;
    this.cropperWidth = event.width;
    this.croppedEvent =event.file;//This is how i tried to get file
}

当我尝试上传文件时，它有一些错误。因此最好提供一种从ngx-image-cropper获取文件对象方法

Answer 1

若要将裁剪后的图像作为文件而不是base64字符串返回，请添加以下内容：

import { ImageCroppedEvent, base64ToFile } from 'ngx-image-cropper';

  imageCropped(event: ImageCroppedEvent) {
    // Preview
    this.croppedImage = event.base64;

    const fileToReturn = this.base64ToFile(
      event.base64,
      this.data.imageChangedEvent.target.files[0].name,
    )

    return fileToReturn;
  }


  base64ToFile(data, filename) {

    const arr = data.split(',');
    const mime = arr[0].match(/:(.*?);/)[1];
    const bstr = atob(arr[1]);
    let n = bstr.length;
    let u8arr = new Uint8Array(n);

    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }

    return new File([u8arr], filename, { type: mime });
  }

Answer 2

该包包含方法base64ToFile

// Import the method:

import { ImageCroppedEvent, base64ToFile } from 'ngx-image-cropper';

.....
imageCropped(event: ImageCroppedEvent) {
    this.croppedImage = event.base64;
    let File = base64ToFile(this.croppedImage);
}

来源：https://github.com/Mawi137/ngx-image-cropper/releases/tag/3.0.0