Pixel-based manipulations of images in DOM
- load an image from a URL
- do some pixel-based manipulation to it (do some color filter operations to it, to be precise)
- put the manipulated image as an <IMG> node into the dom of the html document
I already have a good idea how to do the first two parts - I am just going to draw the image to an invisible canvas. But how can I do the last one?
I thought about extacting the raw binary data from the canvas and then convert it to a data URL. But this seems quite difficult to me. Isn't there a more direct way to do that? I have jQuery and jQueryUI available, when it helps.
The canvas element has a toDataURL() method that gives you a ready-to-use data URL.