Scaling down big images with canvas. Smoothing
When I'm scaling down big images using canvas and drawImage method, the result is far from perfect.
Compare this images. Left one is actually the canvas with scaled image and the right one is a desirable result. Original of this images is 1600x900 photo. Scale goes from original size to 200x113.
When original image have less width and height or scaling ratio more (ie 0.5 - 0.9), then all fine. But I need to get my users ability to resize big images and make nice thumbnails.
I tried to scale image with multiple small steps (for example 1600px -> 1000px -> 500px -> 200px), the result was better, but it's very bad for perfomance, so I refused this.
If achievement of my goal using HTML5 and canvas now isn't possible, is there any chance that in future it will? I'm just thinking whether should I refuse HTML5 technology and make uploading on ActionScript or keep trying (or waiting) to do this with HTML5? I like HTML5 and actually I don't want to leave such a friendly technology.
The left image was scaled down using a more-primitive form of re-sampling or interpolation. This may be entirely due to how the browser's rendering engine happens to scale images, with the results varying from browser to browser.
If it's an option, one approach where you have full control over the resulting image quality is to upload the image, scale it on the server, and then download it back to the client.
Another approach is to use a JS library to resample the image on the client side. Not sure how practical that is.