82 lines
3.1 KiB
JavaScript
82 lines
3.1 KiB
JavaScript
|
"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
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/***/ })
|
||
|
|
|
||
|
|
};
|
||
|
|
;
|