在使用ngx-img-cropper的Angular中，如何獲取裁剪的jpg或png文件，而不是base64圖像

Question

我正在使用Angular（不是AngularJS）和ngx-img-cropper庫。 裁剪圖像后，有沒有辦法獲得裁剪的jpg或png文件？ fileChangeListener（$ event）中的this.data.image是一個base64圖像字符串'data：image / png; base64，iVBORw0KGgo ...'。 this.cropper.image [0]是一個HTML Element對象，this.cropper.image [1]是一個base 64圖像字符串。

這是ngx-img-cropper網站https://github.com/web-dave/ngx-img-cropper 。 我正在嘗試在fileChangeListener（）內部上傳大約3/4的頁面。

Answer 1

這對我有用。 使用'npm install file-saver --save'安裝文件保護程序。

import { saveAs } from 'file-saver';

fileChangeListener($event) {
  const image: any = new Image();
  const file: File = $event.target.files[0];

  const myReader: FileReader = new FileReader();
  const that = this;
  myReader.onloadend = function (loadEvent: any) {
    image.src = loadEvent.target.result;
    that.cropper.setImage(image);
  };
  myReader.readAsDataURL(file);
  const base64: string = Object.values(that.cropper.image)[1];
  const blob = this.dataURItoBlob(base64);
  saveAs(blob, 'croppedFilezz.png');
}

dataURItoBlob(dataURI) {
  const binary = atob(dataURI.split(',')[1]);
  const array = [];
  for (let i = 0; i < binary.length; i++) {
    array.push(binary.charCodeAt(i));
  }
  return new Blob([new Uint8Array(array)], {
    type: 'image/png'
  });
}

我被卡住的地方：在html中不要忘記來自@vava720內的#cropper來回答@vava720 將數據URI轉換為File然后附加到FormData