"use strict"; exports.id = 6718; exports.ids = [6718]; exports.modules = { /***/ 6718: /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "Z": () => (/* binding */ imageInputFileToBase64) /* harmony export */ }); // @ts-check /** * Upload Image function * ------------------------------------------------------------------------------ * @param {object} params * @param {File} params.imageInputFile image input file * @param {number} [params.maxWidth] optional maximum width * @requires Image {imagePreviewNode} - optional image dispatch node * @return object containing image data in base 64 and image name */ async function imageInputFileToBase64({ imageInputFile , maxWidth , }) { /** * Initialize * ------------------------------------------------------------------------------ */ /** ********************* Variables */ let imagePreviewNode = document.querySelector(`[data-imagepreview='image']`); let imageName = imageInputFile.name.replace(/\..*/, ""); let imageDataBase64; let imageSize; let canvas = document.createElement("canvas"); const MIME_TYPE = imageInputFile.type; const QUALITY = 0.95; const MAX_WIDTH = maxWidth ? maxWidth : null; const MAX_HEIGHT = null; const file = imageInputFile; // get the file const blobURL = URL.createObjectURL(file); const img = new Image(); /** ********************* Add source to new image */ img.src = blobURL; imageDataBase64 = await new Promise((res, rej)=>{ /** ********************* Handle Errors in loading image */ img.onerror = function() { URL.revokeObjectURL(this.src); console.log("Cannot load image"); }; /** ********************* Handle new image when loaded */ img.onload = function() { // @ts-ignore URL.revokeObjectURL(this.src); 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); if (imagePreviewNode) { document.querySelectorAll(`[data-imagepreview='image']`).forEach((/** @type {any} */ img)=>{ img.src = srcEncoded; }); } res(srcEncoded); }; }); imageSize = await new Promise((res, rej)=>{ canvas.toBlob((blob)=>{ res(blob?.size); }, MIME_TYPE, QUALITY); }); return { imageBase64: imageDataBase64.replace(/.*?base64,/, ""), imageBase64Full: imageDataBase64, imageName: imageName, imageSize: imageSize }; } /***/ }) }; ;