Resize an image

Assume that we want to resize an image to a given number of percentages. The image can be determined from a file input:

// A file input
<input type="file" id="upload" />

// Get the selected file
const image = document.getElementById('upload').files[0];

The following function scales an image file to ratio of percentages:

const resize = function(image, ratio) {
return new Promise(function(resolve, reject) {
const reader = new FileReader();

// Read the file
reader.readAsDataURL(image);

// Manage the `load` event
reader.addEventListener('load', function(e) {
// Create new image element
const ele = new Image();
ele.addEventListener('load', function() {
// Create new canvas
const canvas = document.createElement('canvas');

// Draw the image that is scaled to `ratio`
const context = canvas.getContext('2d');
const w = ele.width * ratio;
const h = ele.height * ratio;
canvas.width = w;
canvas.height = h;
context.drawImage(ele, 0, 0, w, h);

// Get the data of resized image
('toBlob' in canvas)
? canvas.toBlob(function(blob) {
resolve(blob);
})
: resolve(dataUrlToBlob(canvas.toDataURL()));
});

// Set the source
ele.src = e.target.result;
});

reader.addEventListener('error', function(e) {
reject();
});
});
};

In the sample code above, after drawing a new image, we have to check if the current browser supports the canvas' toBlob method. If not, we have to get the data URL from canvas.toDataURL() first, and then use the following function to convert it to a Blob:

const dataUrlToBlob = function(url) {
const arr = url.split(',');
const mime = arr[0].match(/:(.*?);/)[1];
const str = atob(arr[1]);
let length = str.length;
const uintArr = new Uint8Array(length);
while (length--) {
uintArr[length] = str.charCodeAt(length);
}
return new Blob([uintArr], { type: mime });
};

As soon as we have the Blob of the resized image, we can preview it on the front-end or send it to the back-end as a part of FormData:

// Resize image to 50%
resize(image, 0.5).then(function(blob) {
// Preview
// Assume that `previewEle` represents the preview image element
previewEle.src = URL.createObjectURL(blob);
});

More

Previous
Remove all children of a node
Next
Resize the width of a text box to fit its content automatically