resizing images and getting rid of the jaggies

[Erik Blankinship]

When I resize images in P5JS, they often look aliased / jaggy.

smooth() does not seem to do much to improve things.

Could someone let me know if image resizing is already as good as it gets or if one of these ideas might be worth implementing?

[1]
Wondering if the ideas from here ( http://stackoverflow.com/a/10525163/62255 ) make sense?  Effectively, he suggests ctx.imageSmoothingEnabled = true;
(but it looks to me like this is the default behavior)

[2]
Then there is this answer ( http://stackoverflow.com/a/3223466/62255 ) which seems like a winner, if this functionality is not already implemented in ProcessingJS already.

[Erik Blankinship]

Did not get a lot / any response to this old post about image quality degrading when you downscale your image.

I have stumbled upon a solution which seems to yield good, and fast results, although I've not yet tested in all browsers.  Here's what I do:

I load the image outside of processing (using loadimages.js or just the onloaded callback).  Then I set the size of the img in the html to the desired size (e.g. if I download a 100x100 pixel image, I can set the width and height to 50 on the img tag) and this performs quick and high quality image resizing.  Then, I create a new PImage outside of processing and pass my PImage instance into processing.  It then renders the PImage at the desired smaller size.

The quality is much better.  One of the problems is that when the image is resized in the sketch, we need to go and change the size of the image in html... there is an additional level of complexity which needs to be tackled.

I am wondering if this is a general approach which might be good to integrate into the processing.js source itself?  Are there better and, hopefully, easier solutions out there?

[Erik Blankinship]

Looks like a better solution here for webkit at least:

http://stackoverflow.com/questions/2670084/canvas-image-smoothing