Christian Heilmann

⚡️Helper functions: Resize images to a variable thumbnail size

Wednesday, February 1st, 2012 at 4:27 pm

As part of the “Creating thumbnails with drag and drop and HTML5 canvas” post on MDN today, I spent some time creating a short and working resizing function that takes an arbitrary image and re-sizes it to fit into a thumbnail of a certain width and height. After a few failed attempts I googled around and actually found one of my old PHP/GD tutorials I thought I had deleted years ago. Well, the function still works :)

Without further ado, here is the resize() function (also available as a gist).


function resize( imagewidth, imageheight, thumbwidth, thumbheight ) {
var w = 0, h = 0, x = 0, y = 0,
widthratio = imagewidth / thumbwidth,
heightratio = imageheight / thumbheight,
maxratio = Math.max( widthratio, heightratio );
if ( maxratio > 1 ) {
w = imagewidth / maxratio;
h = imageheight / maxratio;
} else {
w = imagewidth;
h = imageheight;
}

x = ( thumbwidth – w ) / 2;
y = ( thumbheight – h ) / 2;
return { w:w, h:h, x:x, y:y };
};

The returned data is the width and the height of the image and the x and y position in the thumbnail – ready to use in HTML5 canvas.

You can test the function in this Fiddle:

Tags: , , ,

Share on Twitter