function base64toBlob(dataBase64: string): Blob {
const sliceSize = 512;
const byteCharacters = atob(dataBase64);
const byteArrays: Array<Uint8Array<ArrayBuffer>> = [];
for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
const slice = byteCharacters.slice(offset, offset + sliceSize);
const byteNumbers = new Array(slice.length);
for (let i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
byteArrays.push(new Uint8Array(byteNumbers));
}
return new Blob(byteArrays);
}
function blobToBase64(dataBlob: Blob): Promise<string> {
return new Promise((resolve, reject) => {
dataBlob.arrayBuffer().then(arrayBuffer => {
const byteNumbers = new Uint8Array(arrayBuffer);
let byteCharacters = '';
for (let i = 0; i < byteNumbers.length; i++) {
byteCharacters += String.fromCharCode(byteNumbers[i]!);
}
resolve(btoa(byteCharacters));
}, reject);
});
}
export function transcodeImage(
sourceDataBase64: string, destinationType: string,
destinationWidth: number|undefined,
destinationHeight: number|undefined,
destinationQuality: number|undefined): Promise<string> {
return new Promise((resolve, reject) => {
const imageElement = document.createElement('img');
imageElement.addEventListener('load', _ => {
const canvas = document.createElement('canvas');
canvas.width = destinationWidth ?? imageElement.width;
canvas.height = destinationHeight ?? imageElement.height;
const ctx = canvas.getContext('2d')!;
ctx.drawImage(imageElement, 0, 0, canvas.width, canvas.height);
canvas.toBlob(dataBlob => {
blobToBase64(dataBlob!).then(resolve, reject);
}, destinationType, destinationQuality);
});
imageElement.addEventListener('error', reject);
imageElement.src = URL.createObjectURL(base64toBlob(sourceDataBase64));
});
}