Behold, the thumbnail generating code: // returns a function that calculates lanczos weight function lanczos Create(lobes) // elem: canvas element, img: image element, sx: scaled width, lobes: kernel radius function thumbnailer(elem, img, sx, lobes) thumbnailer.prototype.process1 = function(self, u) ; thumbnailer.prototype.process2 = function(self) ; Fast image resize/resample algorithm using Hermite filter with Java Script. Preview: Update: version 2.0 added on Git Hub (faster, web workers transferable objects). Git: https://github.com/viliusle/Hermite-resize Demo: Paint/ /** * Hermite resize - fast image resize/resample using Hermite filter. * * @param canvas * @param width * @param height * @param resize_canvas if true, canvas will be resized. */ function resample_single(canvas, width, height, resize_canvas) Try pica - that's a highly optimized resizer with selectable algorythms. For example, original image from first post is resized in 120ms with Lanczos filter and 3px window or 60ms with Box filter and 0.5px window.
to use a canvas, please note that there are two ways an image can be resize: by resizing the canvas with css or by drawing the image at a smaller size. If you use CSS to resize the canvas, it will actually stretch (i.e.: resize) the content of the canvas to fit the full canvas (rather than simply increasing or decreasing the area of the canvas.
It'd be worth a shot to try drawing the image into a canvas control with the height and width attributes set to the size of the image and then using CSS to resize the canvas to the size you're looking for.
The average pixel color in the source will be the average pixel color in the destination, which these other formulas, I think they will not be.
This "technique" eats processor as it if was ice cream in the summer, but it does the trick.
I know its possible to get this to look right, because this site can do it just fine using a canvas as well.
I've tried using the same code they do as shown in the "[Source]" link, but it still looks terrible.
Perhaps this would use a different resizing algorithm.
It should also be noted that canvas has different effects in different browsers (and even different versions of different browsers).