2

アップロードする前に画像を編集するために使用している画像エディターを作成しています。

そのため、クロッパー 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);
  }
}
4

0 に答える 0