在 Angular 10 中裁剪后的图像预览问题

Question

在我的 angular 10 项目中，我使用 ngx-image-cropper 来裁剪图像。裁剪图像后，ngx-image-cropper 为我们提供 base64 字符串值。但我想将此 base64 值转换为文件并在另一个图像预览器中显示此文件。稍后我想将转换后的图像上传到服务器，而不是将 base64 保存到数据库。要将 base64 转换为图像文件，我使用了以下代码：

convertBase64ToFile(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 });
  }

现在在 imageCropped 事件中，我尝试将转换后的图像文件设置为图像预览器。代码是：

imageCropped(event: ImageCroppedEvent) {
    this.croppedImage = event.base64;
    
    this.fileToReturn = this.convertBase64ToFile(event.base64, this.imageChangedEvent.target.files[0].name)

    console.log(this.fileToReturn);
    
    var reader = new FileReader();
    reader.onload = (event: any) => {
      this.croppedImage = this.fileToReturn;
    };

    reader.onerror = (event: any) => {
      console.log("File could not be read: " + event.target.error.code);
    };

    reader.readAsDataURL(this.fileToReturn);

    return this.fileToReturn;
  }

如果我将此变量 fileToReturn 值打印到控制台，我会得到以下对象：

HTML：

<div id="preview" class="text-center col-md-4">
   <h5>Preview</h5>
   <img [src]="croppedImage" />
</div>

但问题是图像没有显示。相反，我在控制台中收到以下消息：

GET http://localhost:4200/[object%20File] 404（未找到）

现在谁能推荐我

1. 如何将转换后的文件显示给预览器
2. 如何将转换后的文件上传到服务器？

我的完整代码是：

<div class="container">
    <div class="row" style="margin-top: 5%;">
        <div class="text-center col-md-12">
            <input type="file" (change)="fileChangeEvent($event)" />
        </div>
    </div>
    <div class="row" style="margin-top: 5%;">
        <div class="text-center col-md-8">
            <h5>Crop Image</h5>
            <image-cropper 
                [imageChangedEvent]="imageChangedEvent" 
                [maintainAspectRatio]="true" 
                [aspectRatio]="4 / 4"
                [resizeToWidth]="256" 
                format="png" 
                (imageCropped)="imageCropped($event)" 
                (imageLoaded)="imageLoaded()"
                (cropperReady)="cropperReady()" 
                (loadImageFailed)="loadImageFailed()">
            </image-cropper>
        </div>
        <div id="preview" class="text-center col-md-4">
            <h5>Preview</h5>
            <img [src]="croppedImage" />
        </div>
    </div>
</div>

TS 文件：

import { Component, OnInit } from '@angular/core';
import { ImageCroppedEvent } from 'ngx-image-cropper';

@Component({
  selector: 'app-image-cropper1',
  templateUrl: './image-cropper1.component.html',
  styleUrls: ['./image-cropper1.component.css']
})
export class ImageCropper1Component implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

  imageChangedEvent: any = '';
  croppedImage: any = '';
  fileToReturn: any;

  fileChangeEvent(event: any): void {
    this.imageChangedEvent = event;
    //console.log(event);

  }

  imageCropped(event: ImageCroppedEvent) {
    this.croppedImage = event.base64;
    this.fileToReturn = this.convertBase64ToFile(event.base64, this.imageChangedEvent.target.files[0].name)

    //console.log(this.imageChangedEvent.target.files[0]);
    console.log(this.fileToReturn);
    
    var reader = new FileReader();
    reader.onload = (event: any) => {
      this.croppedImage = this.fileToReturn;
    };

    reader.onerror = (event: any) => {
      console.log("File could not be read: " + event.target.error.code);
    };

    reader.readAsDataURL(this.fileToReturn);

    return this.fileToReturn;
  }

  imageLoaded() {
    // show cropper
  }

  cropperReady() {
    // cropper ready
  }

  loadImageFailed() {
    // show message
  }

  convertBase64ToFile(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 1

要将裁剪的图像转换为文件而不是base64字符串ngx-image-cropper有base64ToFile方法

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