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

编程问答 2022-05-21

问题描述

在我的 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 值打印到控制台，我会得到以下对象：

enter image description here

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,{ type: mime });
  }
}

解决方法

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

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