94 lines
2.9 KiB
TypeScript
94 lines
2.9 KiB
TypeScript
|
export type ImageInputToBase64FunctionReturn = {
|
||
|
|
imageBase64?: string;
|
||
|
|
imageBase64Full?: string;
|
||
|
|
imageName?: string;
|
||
|
|
};
|
||
|
|
|
||
|
|
export type ImageInputToBase64FunctioParam = {
|
||
|
|
imageInput: HTMLInputElement;
|
||
|
|
maxWidth?: number;
|
||
|
|
mimeType?: string;
|
||
|
|
};
|
||
|
|
|
||
|
|
export default async function imageInputToBase64({
|
||
|
|
imageInput,
|
||
|
|
maxWidth,
|
||
|
|
mimeType,
|
||
|
|
}: ImageInputToBase64FunctioParam): Promise<ImageInputToBase64FunctionReturn> {
|
||
|
|
try {
|
||
|
|
if (!imageInput.files?.[0]) {
|
||
|
|
throw new Error("No Files found in this image input");
|
||
|
|
}
|
||
|
|
let imagePreviewNode = document.querySelector(
|
||
|
|
`[data-imagepreview='image']`
|
||
|
|
);
|
||
|
|
let imageName = imageInput.files[0].name.replace(/\..*/, "");
|
||
|
|
|
||
|
|
let imageDataBase64: string | undefined;
|
||
|
|
|
||
|
|
const MIME_TYPE = mimeType ? mimeType : "image/jpeg";
|
||
|
|
const QUALITY = 0.95;
|
||
|
|
const MAX_WIDTH = maxWidth ? maxWidth : null;
|
||
|
|
|
||
|
|
const file = imageInput.files[0];
|
||
|
|
const blobURL = URL.createObjectURL(file);
|
||
|
|
const img = new Image();
|
||
|
|
|
||
|
|
img.src = blobURL;
|
||
|
|
|
||
|
|
imageDataBase64 = await new Promise((res, rej) => {
|
||
|
|
img.onerror = function () {
|
||
|
|
URL.revokeObjectURL(this.src);
|
||
|
|
window.alert("Cannot load image!");
|
||
|
|
};
|
||
|
|
|
||
|
|
img.onload = function () {
|
||
|
|
URL.revokeObjectURL(img.src);
|
||
|
|
|
||
|
|
const canvas = document.createElement("canvas");
|
||
|
|
|
||
|
|
if (MAX_WIDTH) {
|
||
|
|
const scaleSize = MAX_WIDTH / img.naturalWidth;
|
||
|
|
|
||
|
|
canvas.width =
|
||
|
|
img.naturalWidth < MAX_WIDTH
|
||
|
|
? img.naturalWidth
|
||
|
|
: MAX_WIDTH;
|
||
|
|
canvas.height =
|
||
|
|
img.naturalWidth < MAX_WIDTH
|
||
|
|
? img.naturalHeight
|
||
|
|
: img.naturalHeight * scaleSize;
|
||
|
|
} else {
|
||
|
|
canvas.width = img.naturalWidth;
|
||
|
|
canvas.height = img.naturalHeight;
|
||
|
|
}
|
||
|
|
|
||
|
|
const ctx = canvas.getContext("2d");
|
||
|
|
ctx?.drawImage(img, 0, 0, canvas.width, canvas.height);
|
||
|
|
|
||
|
|
const srcEncoded = canvas.toDataURL(MIME_TYPE, QUALITY);
|
||
|
|
|
||
|
|
res(srcEncoded);
|
||
|
|
};
|
||
|
|
});
|
||
|
|
|
||
|
|
return {
|
||
|
|
imageBase64: imageDataBase64?.replace(/.*?base64,/, ""),
|
||
|
|
imageBase64Full: imageDataBase64,
|
||
|
|
imageName: imageName,
|
||
|
|
};
|
||
|
|
} catch (error: any) {
|
||
|
|
console.log("Image Processing Error! =>", error.message);
|
||
|
|
|
||
|
|
return {
|
||
|
|
imageBase64: undefined,
|
||
|
|
imageBase64Full: undefined,
|
||
|
|
imageName: undefined,
|
||
|
|
};
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/** ********************************************** */
|
||
|
|
/** ********************************************** */
|
||
|
|
/** ********************************************** */
|