javascript - är det möjligt att ändra storleken på blobben. Bildens storlek ökar efter att ha lagts i canvas

Jag skapar en bildredigerare som jag använder för att redigera bilder innan jag laddar upp dem.

Så för detta använder jag Cropper JS.

men här är ett problem, bildens storlek ökar efter att ha redigerat bilden.

Så jag vill behålla bildens kvalitet efter att ha redigerat den på samma sätt som den ursprungliga bilden har.

här är som

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