Resizing an HTML canvas for thumbnails: can I reduce pixels and improve resizing / interpolation?

Question

I start with a large canvas where drawImage() used to output data from a real image to an HTML canvas.

Later I create thumbnails of this canvas / image that contain much smaller canvas elements (for performance reasons). I just create new canvases with smaller widths and heights and again use drawImage() , using the original canvas to make a thumbnail.

On many platforms, the thumbnail image of the results looks very pixelated (PC Chrome, PC Firefox, iOS Safari), but on others, such as Mac Firefox, resizing does a much better job of interpolation.

Is there any solution that can give me consistent interpolation? For example, IE has its own CSS property, which can be set:

 object.style.msInterpolationMode = "bicubic"; 

Something similar for other platforms? And specifically during implicit image resizing during drawImage() ? Or any other creative solution is welcome.

Answer 1

Unfortunately, the short answer is that there is no built-in way. Different browsers still implement anti-aliasing and, possibly, interpolation in different ways.

Unfortunately, the specification here is very permissive:

If the original image data is a raster image, the value drawn at a point in the destination rectangle is calculated by filtering the original image data. The user agent [browser] can use any filtering algorithm (for example, bilinear interpolation or the nearest neighbor).

The emphasis is mine. In other words, browsers are free to use drawImage as they wish. Unfortunately, for those who hope for consistency.

You can create your own algorithm using getImageData or a large number of calls to drawImage() , but this will be slow.