Poor quality of resize (in all browsers I've seen)

[chichilatte]

Hi, I've noticed that the javascript canvas context's drawImage method does a really poor quality resize. There is a good stack-overflow article on the subject, with example images and an excellent solution in the accepted answer (i've tested it, it works :) )...

http://stackoverflow.com/questions/18922880/html5-canvas-resize-downscale-image-high-quality

I wonder how easy it would be to use their downScaleCanvas method inside your renderImageToCanvas method?

[stomita]

Might be possible, however my current interest is not so much put on the quality and the changing requires works to balance the trade-offs (memory, processing time) for other users. You can folk the code and create your own to establish the quality-first MegaPixImage implementation, and if you found your achievement is to be shared to this library for other users, you can send me pull request, and hopefully I can merge it.

[maca91]

I'm interested too...

[z-vr]

Some people suggested drawing 1/2 of the image, then 1/2 of the resized one and so on. However, it takes a lot of resources to accomplish that kind of transform. What you can do, is to resize to, say, 500px, which will produce pretty good quality image, and then set max-height of an img element to 200px or whatever your needs are.

[puzrin]

Canvas is speed-optimized and use "nearest neighbour" interpolation. You can't change that.

Use https://github.com/nodeca/pica for resize, when you need high quality. It has lanczos3 filter, best for this task.

[chichilatte]

Great work, thanks puzrin!