javascript - 是否可以调整 blob 的大小。放入画布后图像尺寸变大

Question

我正在创建一个图像编辑器，用于在上传之前编辑图像。

所以为此，我使用cropper JS。

但这里有一些问题，图像的大小在编辑图像后会增加。

所以，我想在编辑后保持图像的质量，就像原始图像一样。

这是索姆

private getImageFromBase64(file: File, base64, callback) {
  let dataURI = base64;
  let typeOfImage = file.type;
  let nameOfImage = file.name;
  // convert base64 to raw binary data held in a string
  let byteString = atob(dataURI.split(',')[1]);
  // separate out the mime component
  let mimeString = dataURI
    .split(',')[0]
    .split(':')[1]
    .split(';')[0];
  // write the bytes of the string to an ArrayBuffer
  let ab = new ArrayBuffer(byteString.length);
  let ia = new Uint8Array(ab);
  for (let i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }
  // write the ArrayBuffer to a blob, and you're done
  let bb: Blob = new Blob([ab], { type: typeOfImage });
  let editedFile: any;

  try {
    editedFile = new File([bb], nameOfImage, { type: typeOfImage });
  } catch (err) {
    editedFile = bb;
    editedFile.name = nameOfImage;
    editedFile.lastModifiedDate = new Date();
  }
  return callback(editedFile);
}
private save(cb) {
  let result = this.cropper.getCroppedCanvas({
    width: this.width || 600,
    height: this.height || 858
  });
  try {
    result.toBlob((blob: any) => {
      blob.name = this.file.name;
      blob.lastModifiedDate = new Date();
      cb(blob);
    });
  } catch (err) {
    this.getImageFromBase64(this.file, result.toDataURL('jpeg', 0.8), cb);
  }
}