JavaScript Image Resizer and Scaling Algorithms

I have been recently reading about Image Scaling and Pixelation and wanted to create a simple HTML5 image resizer. It turns out that someone beat me to it as I found JS-Image-Resizer on GitHub and it even implements HTML5 Web Workers. It features a two-pass resizing algorithm and I think it looks pretty good, but I still wanted to share some research I have done into image scaling with JavaScript.

I was initially interested with image scaling when reading about pixel art in HTML5 games and reading Johannes Kopf and Dani Lischinski paper on depixelizing pixel art. When you want to build HTML5 games where you are re-sizing pixels and want things to work the same across browsers with good performance, there is a lot to consider.

But, if you are just re-sizing a photo in latest Chrome, which was my use case, you probably don’t have to worry about much since modern browsers have support for some of these algorithms already in CSS and JavaScript. Consider the following two JSFiddle examples:

Canvas Resize with Image Smoothing Disabled
Canvas Resize with Image Smoothing Enabled

But, what if you do not want to use the algorithms used by browsers? You can write your own, here is a JSFiddle example of Bilinear and Bicubic Interpolation in JavaScript. If you want something more fancy, I recommend looking at this hqx Pixel Art Scaling Algorithm in JavaScrip. If you are thinking about performance, this is a nice HTML5 Canvas Pixel Interpolation comparison from JSPerf. Finally, this article has some great information on image interpolation, browser rendering and CSS resizing.