Resizing an image in an HTML5 canvas

Question

I\'m trying to create a thumbnail image on the client side using javascript and a canvas element, but when I shrink the image down, it looks terrible. It looks as if it was

Answer 1

I've put up some algorithms to do image interpolation on html canvas pixel arrays that might be useful here:

https://web.archive.org/web/20170104190425/http://jsperf.com:80/pixel-interpolation/2

These can be copy/pasted and can be used inside of web workers to resize images (or any other operation that requires interpolation - I'm using them to defish images at the moment).

I haven't added the lanczos stuff above, so feel free to add that as a comparison if you'd like.