アップロードする前に画像を編集するために使用している画像エディターを作成しています。
そのため、クロッパー 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);
}
}