pro/im_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip: image scaling by size

Browse Source
This commit is contained in:
or-else
2020-10-13 16:30:34 -07:00
parent fbdf1df9d0
commit f9d622a8d8
1 changed files with 15 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/blob-helpers.js
+15 -14
View File
@@ -66,8 +66,9 @@ export function fileNameForMime(fname, mime) {
return fname + '.' + ext; return fname + '.' + ext;
} }
// Scale uploaded image to fit under certain dimensions or byte size, optionally constraining to a square. // Scale uploaded image to fit under certain dimensions and byte size, optionally constraining to a square.
export function imageFileScaled(file, maxWidth, maxHeight, maxSize, forceSquare, onSuccess, onError) { // On success calls onSuccess callback with the scaled image as Blob.
export function imageScaled(file, maxWidth, maxHeight, maxSize, forceSquare, onSuccess, onError) {
const img = new Image(); const img = new Image();
img.crossOrigin = 'Anonymous'; img.crossOrigin = 'Anonymous';
img.onerror = function(err) { img.onerror = function(err) {
@@ -91,25 +92,25 @@ export function imageFileScaled(file, maxWidth, maxHeight, maxSize, forceSquare,
ctx.drawImage(this, dim.xoffset, dim.yoffset, dim.srcWidth, dim.srcHeight, ctx.drawImage(this, dim.xoffset, dim.yoffset, dim.srcWidth, dim.srcHeight,
0, 0, dim.dstWidth, dim.dstHeight); 0, 0, dim.dstWidth, dim.dstHeight);
let mime = SUPPORTED_IMAGE_FORMATS.indexOf(file.type) < 0 ? 'image/jpeg' : file.type; const mime = SUPPORTED_IMAGE_FORMATS.indexOf(file.type) < 0 ? 'image/jpeg' : file.type;
let imageBits = canvas.toDataURL(mime); // Generate blob to check size of the image.
const parts = imageBits.split(','); let blob = await new Promise(resolve => canvas.toBlob(resolve, mime));
// Get actual image type: 'data:image/png;base64,' if (!blob) {
mime = getMimeType(parts[0]);
if (!mime) {
onError("Unsupported image format"); onError("Unsupported image format");
return; return;
} }
// Ensure the image is not too large. Shrink the image keeping the aspect ratio. // Ensure the image is not too large. Shrink the image keeping the aspect ratio.
while (base64DecodedLen(imageBits.length) > maxSize && quality > 0.45) { while (blob.length > maxSize) {
imageBits = canvas.toDataURL(mime, quality); dim.dstWidth = (dim.dstWidth * 0.70710678118) | 0;
dim.dstHeight = (dim.dstHeight * 0.70710678118) | 0;
canvas.width = dim.dstWidth;
canvas.height = dim.dstHeight;
blob = await new Promise(resolve => canvas.toBlob(resolve, mime));
} }
canvas.toBlob((blob) => {
onSuccess(blob, mime, dim.dstWidth, dim.dstHeight, fileNameForMime(file.name, mime));
}
);
canvas = null; canvas = null;
onSuccess(blob, mime, dim.dstWidth, dim.dstHeight, fileNameForMime(file.name, mime));
}; };
img.src = URL.createObjectURL(file); img.src = URL.createObjectURL(file);
} }