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

Question

我正在使用 ngx-image-cropper 来裁剪我的图片。我需要从 ngx-image-cropper 中检索已裁剪的图像以上传。然而，我无法通过它来检索文件对象。

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

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 获取文件对象的方法。

- nipun-kavishka

---

你能否创建一个 Stackblitz 或者展示事件对象？ - Tobias Kaufmann

看起来这个在3.0版本中被移除了。https://github.com/Mawi137/ngx-image-cropper/pull/314 - initplatform

有一种方法。我们可以返回裁剪图像的base64。然后，我们可以将其转换为blob（base64 to blob），并使用该blob创建文件。 - nipun-kavishka

@nipun-kavishka 它正在创建一个损坏的文件。 - Kishita Variya

Answer 1

该软件包包含方法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

- mentamarindo

---

这应该是答案。 - Faizal Hussain

你如何将一个HTML按钮与调用此函数连接起来？ - Que

这个返回的是 Blob 类型对象，但我们需要 File 类型，我们能做到吗？或者当我们将图像传递给 API 时是否相同。 - Faisal

为了将其变成文件而不是 Blob，您可以使用以下代码：file: File = new File([fileBlob], originalFile.name, {lastModified: originalFile.lastModified, type: originalFile.type}); - Deb

谢谢。这非常有帮助。相当令人沮丧，因为在这个库的规范中显示可以指定输出类型。但是当你查看d.ts文件时，没有重载.crop()接受字符串参数output?: blob | base64 - undefined

Answer 2

为了返回裁剪后的图像文件而不是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 });
  }

- Kelvin Menegasse

Answer 3

针对^1.5.1版本：

imageCropped(event: ImageCroppedEvent) {
    this.croppedImage = event.base64;
    const file_image: File = this.imageChangedEvent.target.files[0]; //The change event from your file input (set to null to reset the cropper)
    const file = new File([event.file], file_image.name, {type: file_image.type});

    console.log("file", file);
}

- EAlino

Answer 4

我解决了将原始文件发送到函数并在image-cropper的crop( originalFile: File )函数中创建一个新的File实例：

import { ImageCroppedEvent, base64ToFile } from 'ngx-image-cropper';
...
crop(originalFile): File {
   ...
   ...
   output.base64 = this.cropToBase64(cropCanvas);
   if(originalFile){
     const file = new File([base64ToFile(output.base64)], originalFile.name, {lastModified: originalFile.lastModified, type: originalFile.type});
     return file;
   }
}

- Martín Rodríguez

Answer 5

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

export class YourComponent {
    imageChangedEvent: any = '';
    croppedImage: any = '';
    
    constructor(
      private sanitizer: DomSanitizer
    ) {
    }

    fileChangeEvent(event: any): void {
        this.imageChangedEvent = event;
    }
    imageCropped(event: ImageCroppedEvent) {
      this.croppedImage = this.sanitizer.bypassSecurityTrustUrl(event.objectUrl);
      // event.blob can be used to upload the cropped image
    }
    imageLoaded(image: LoadedImage) {
        // show cropper
    }
    cropperReady() {
        // cropper ready
    }
    loadImageFailed() {
        // show message
    }
}

源代码：https://github.com/Mawi137/ngx-image-cropper/releases/tag/7.0.0

- Mohamed Ashique Ar-Rasool