Angular 从ngx图像裁剪器返回要上载的文件-角度

Angular 从ngx图像裁剪器返回要上载的文件-角度,angular,image,file,blob,node-modules,Angular,Image,File,Blob,Node Modules,我用它来裁剪我的图像。我需要从中检索要上载的裁剪图像。但是,我无法通过此检索文件对象 这是我在用户裁剪图像时触发的代码 imageCropped(event: ImageCroppedEvent) { this.croppedImage = event.base64; this.cropperHeight = event.height; this.cropperWidth = event.width; this.croppedEvent =event.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获取文件对象的方法

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

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

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

    console.log(this.data.imageChangedEvent.target.files[0]);
    console.log(this.fileToReturn);
    return this.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 });
  }


该包包括方法
base64ToFile

// Import the method:

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

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


来源:

您可以制作Stackblitz或显示事件对象吗?看起来这在3.0版本中被删除了。有办法。我们可以返回裁剪图像的base64。然后我们可以将其转换为blob(base64到blob)并使用该blob创建文件。@nipun kavishka它正在创建一个损坏的文件。这应该是答案。您如何连接HTML按钮来调用此函数?