Image Resizing Using Javascript
January 24, 2018
Richard Moore
In my blog post about a JavaScript based photo slideshow viewer, I mentioned creating a utility for the bulk resizing of image files using JavaScript. Here is a write up of how I used the HTML5 Canvas element from JavaScript code to resize image files and create new JPEG files of the resized images. To make things easy for myself the image files to be resized must be contained in a single zip archive. The resized images are placed as JPEG files, regardless of the original format, back into the zip archive (overwriting the original file) and downloaded to the users computer. The HTML and JavaScript code is contained in the files:
If you look at the JavaScript file you can see that there is not a lot of code. It turns out to be pretty easy to do this. I leveraged JSZip and FileSaver.js as I have in other JavaScript projects.
The HTML sets up a minimal user interface as show below, and also pulls in the needed JavaScript files.
The user can set the desired resized image width and height along with a JPEG quality value for use in saving the resized image data to a JPEG file. Once a zip file that contains the image files to resize is selected, the files are processed one at a time and displayed on the screen in the canvas (which is the element used for resizing). I was pretty impressed how fast the JavaScript processes through the files, and how big a zip file you can process. There is no effort made to recover from errors associated with bad image files or files that may be in the zip archive that are not image files. Things just stop processing and no result zip file downloaded with no notice that anything went wrong. I might spend some time fixing this in the future, but for what I am doing it works well enough. As you can see below, the resulting zip file of resized JPEG files is downloaded as resizedImages.zip. The browser download process automatically takes care of any conflicts in file names.
When a zip archive is selected, the JavaScript callback code gets the user configured parameters for the resize width, height, and JPEG quality. A FileReader is then set up to load the zip archive for JSZip to use.
function StartImagesZipResize() {
if (!XMLHttpRequest) {
alert("XMLHttpRequest not supported!!!!");
return;
}
var files = document.getElementById('zipFile').files;
if (files.length === 0) {
alert("No files to upload!!!!");
return;
}
var file = files[0];
imageUploaded = 0;
document.getElementById('currentFileProcessing').innerHTML = "Processing File: " + file.name;
currentFileNumber = 0;
fileNames = undefined;
zipArchiveToReadFrom = undefined;
// Get the size and jpeg quality
resizeTargetWidth = document.getElementById('resizePhotoZipWidth').value;
resizeTargetHeight = document.getElementById('resizePhotoZipHeight').value;
jpegQuality = document.getElementById('resizePhotoZipJPEGQuality').value / 100.0;
var reader = new FileReader();
reader.onloadend = ReadOfArchiveFileCompleted;
reader.readAsArrayBuffer(file);
}
When the FileReader has loaded the zip archive the ReadOfArchiveFileCompleted callback is called to continue processing.
function ReadOfArchiveFileCompleted(evt)
{
theResizeCanvas = document.getElementById("themnmooresResizeCanvas");
theResizeCanvas.width = resizeTargetWidth;
theResizeCanvas.height = resizeTargetHeight;
var imagesZipFile = new JSZip();
imagesZipFile.loadAsync(evt.target.result)
.then(function success(zip)
{
console.log('Read zip file');
zipArchiveToReadFrom = zip;
fileNames = zip.file(/./);
// Kick off the async chain of callbacks for processing an image
startProcessingFile(fileNames[0].name);
});
}
The HTML canvas element is set to the appropriate width and height (this could have been done in the previous function), and then JSZip is used to load the zip file for JavaScript to use. The process of resizing each individual file is started by calling startProcessingFile.
function startProcessingFile(name)
{
// Read the file from the zip archive
theFile = zipArchiveToReadFrom.file(name);
theFile.async('blob')
.then(function success(content)
{
// Resize the image file into a canvas
currentImage = new Image();
content.type = 'image/jpeg';
currentImage.src = URL.createObjectURL(content);
currentImage.onload = resizeImage;
},
function error(e){
document.getElementById('archiveFileContents').innerHTML = '<br><br><b>ERROR reading zip file: </b>:' + e;
console.log('ERROR reading zip file:' + e);
});
}
This function reads the image file from the zip archive and sets up for the image to be rendered on the html canvas using an Image object that calls the function resizeImage when the image file data is loaded and ready to be used.
function resizeImage()
{
ctx = theResizeCanvas.getContext("2d");
// Figure out how to fit the image to the desired size restrictions
scaleFactorX = resizeTargetWidth / currentImage.width;
scaleFactorY = resizeTargetHeight / currentImage.height;
width = resizeTargetWidth;
height = resizeTargetHeight;
if (scaleFactorX < scaleFactorY) // Means the x dimension gets scaled more
{
height = currentImage.height * scaleFactorX;
}
else // Means the y dimension gets scaled more
{
width = currentImage.width * scaleFactorY;
}
theResizeCanvas.width = width;
theResizeCanvas.height = height;
ctx.drawImage(currentImage, 0, 0, width, height);
// Now create a jpeg image from canvas
var canvasJpegBlob = theResizeCanvas.toBlob(jpegBlobCallback,'image/jpeg', jpegQuality);
}
The image aspect ratio is preserved when scaling so we figure out a scaling factor that will preserve the aspect ratio while fitting the image data into the width/height dimensions specified by the user. This scaling factor is used to calculate the width and height for the canvas element to be set to for scaling the image properly. Image data is then rendered with resizing to the canvas using the drawImage function of the canvas. The canvas is then converted to a JPEG file blob which is written to the existing zip archive overwriting the existing image file. The canvas toBlob function calls jpegBlobCallback to write the blob back into the zip archive.
function jpegBlobCallback(blobObj)
{
// Replace the modified jpeg into the zip file (overwritting the existing one)
zipArchiveToReadFrom.file(fileNames[currentFileNumber].name,blobObj);
nextImage();
}
Once the file is written into the zip archive the nextImage function is called to repeat the process above for the next image file.
function nextImage()
{
currentFileNumber++;
if (currentFileNumber < fileNames.length)
{
// Kick off the async chain of callbacks for processing an image
startProcessingFile(fileNames[currentFileNumber].name);
}
else
{
// Create new zip file from modified files
zipArchiveToReadFrom.generateAsync({type:"blob"})
.then(function success(zippedFile) {
saveAs(zippedFile, "resizedImages.zip");
},
function error(e) {
document.getElementById('archiveFileContents').innerHTML = '<br><br><b>ERROR creating new zip file: </b>:' + e;
console.log('ERROR creating zip file:' + e);
});
}
}
If the file we just processed is not the last file in the archive the next image file is set up to be processed using the chain of functions described above. Otherwise the zip archive is downloaded to the file resizedImages.zip.
As you can see the code needed to do resizing of image files is pretty minimal. I am sure there could be some performance enhancements done, but is seems to process about an image per second and for my use that is plenty fast enough. Memory use might be a problem, although in resizing zip files with 200-300 images in them there have been no issues.
Copyright 2018, Richard J. Moore
keywords: Javascript, Image Resizing, JPEG, HTML5 Canvas
description: Resizing of image files using a HTML5 Canvas in Javascript