Moduletrace/datasquirel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updates

Browse Source
This commit is contained in:
Tben 2023-05-23 16:14:35 +01:00
parent 285c82193f
commit 5ca2983100
3 changed files with 135 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

135
client/media/imageInputFileToBase64.js
View File

@ -27,76 +27,87 @@ export default async function imageInputFileToBase64({ imageInputFile, maxWidth,
* *
* @description make a request to datasquirel.com * @description make a request to datasquirel.com
*/ */
console.log(typeof imageInputFile); try {
console.log(typeof imageInputFile);
let imageName = imageInputFile.name.replace(/\..*/, ""); let imageName = imageInputFile.name.replace(/\..*/, "");
let imageDataBase64; let imageDataBase64;
let imageSize; let imageSize;
let canvas = document.createElement("canvas"); let canvas = document.createElement("canvas");
const MIME_TYPE = imageInputFile.type; const MIME_TYPE = imageInputFile.type;
const QUALITY = 0.95; const QUALITY = 0.95;
const MAX_WIDTH = maxWidth ? maxWidth : null; const MAX_WIDTH = maxWidth ? maxWidth : null;
const file = imageInputFile; // get the file const file = imageInputFile; // get the file
const blobURL = URL.createObjectURL(file); const blobURL = URL.createObjectURL(file);
const img = new Image(); const img = new Image();
/** ********************* Add source to new image */ /** ********************* Add source to new image */
img.src = blobURL; img.src = blobURL;
imageDataBase64 = await new Promise((res, rej) => { imageDataBase64 = await new Promise((res, rej) => {
/** ********************* Handle Errors in loading image */ /** ********************* Handle Errors in loading image */
img.onerror = function () { img.onerror = function () {
URL.revokeObjectURL(this.src); URL.revokeObjectURL(this.src);
console.log("Cannot load image"); console.log("Cannot load image");
};
/** ********************* Handle new image when loaded */
img.onload = function () {
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((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,
}; };
} catch (error) {
console.log("Image Processing Error! =>", error.message);
/** ********************* Handle new image when loaded */ return {
img.onload = function () { imageBase64: null,
URL.revokeObjectURL(this.src); imageBase64Full: null,
imageName: null,
if (MAX_WIDTH) { imageSize: null,
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((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,
};
} }
/** ********************************************** */ /** ********************************************** */

112
client/media/imageInputToBase64.js
View File

@ -26,64 +26,74 @@ export default async function imageInputToBase64({ imageInput, maxWidth, mimeTyp
* *
* @description make a request to datasquirel.com * @description make a request to datasquirel.com
*/ */
let imagePreviewNode = document.querySelector(`[data-imagepreview='image']`); try {
let imageName = imageInput.files[0].name.replace(/\..*/, ""); let imagePreviewNode = document.querySelector(`[data-imagepreview='image']`);
let imageDataBase64; let imageName = imageInput.files[0].name.replace(/\..*/, "");
let imageDataBase64;
const MIME_TYPE = mimeType ? mimeType : "image/jpeg"; const MIME_TYPE = mimeType ? mimeType : "image/jpeg";
const QUALITY = 0.95; const QUALITY = 0.95;
const MAX_WIDTH = maxWidth ? maxWidth : null; const MAX_WIDTH = maxWidth ? maxWidth : null;
const file = imageInput.files[0]; // get the file const file = imageInput.files[0]; // get the file
const blobURL = URL.createObjectURL(file); const blobURL = URL.createObjectURL(file);
const img = new Image(); const img = new Image();
/** ********************* Add source to new image */ /** ********************* Add source to new image */
img.src = blobURL; img.src = blobURL;
imageDataBase64 = await new Promise((res, rej) => { imageDataBase64 = await new Promise((res, rej) => {
/** ********************* Handle Errors in loading image */ /** ********************* Handle Errors in loading image */
img.onerror = function () { img.onerror = function () {
URL.revokeObjectURL(this.src); URL.revokeObjectURL(this.src);
window.alert("Cannot load image!"); window.alert("Cannot load image!");
};
/** ********************* Handle new image when loaded */
img.onload = function () {
URL.revokeObjectURL(this.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);
if (imagePreviewNode) {
document.querySelectorAll(`[data-imagepreview='image']`).forEach((img) => {
img.src = srcEncoded;
});
}
res(srcEncoded);
};
});
return {
imageBase64: imageDataBase64.replace(/.*?base64,/, ""),
imageBase64Full: imageDataBase64,
imageName: imageName,
}; };
} catch (error) {
console.log("Image Processing Error! =>", error.message);
/** ********************* Handle new image when loaded */ return {
img.onload = function () { imageBase64: null,
URL.revokeObjectURL(this.src); imageBase64Full: null,
imageName: null,
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);
if (imagePreviewNode) {
document.querySelectorAll(`[data-imagepreview='image']`).forEach((img) => {
img.src = srcEncoded;
});
}
res(srcEncoded);
}; };
}); }
return {
imageBase64: imageDataBase64.replace(/.*?base64,/, ""),
imageBase64Full: imageDataBase64,
imageName: imageName,
};
} }
/** ********************************************** */ /** ********************************************** */

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "datasquirel", "name": "datasquirel",
"version": "1.1.30", "version": "1.1.31",
"description": "Cloud-based SQL data management tool", "description": "Cloud-based SQL data management tool",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {