First Commit

2024-12-09 16:36:17 +01:00
parent f24b493566
commit b037cec100
128 changed files with 3281 additions and 193 deletions
@@ -0,0 +1,93 @@
+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,
+        };
+    }
+}
+
+/** ********************************************** */
+/** ********************************************** */
+/** ********************************************** */