Poor quality of resize (in all browsers I've seen)
Opened this issue · 5 comments
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?
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.
I'm interested too...
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.
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.
Great work, thanks puzrin!