Question

As part of a game which I am developing in Javascript I want to:

1. load an image from a URL
2. do some pixel-based manipulation to it (do some color filter operations to it, to be precise)
3. 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.

Answer 1

The canvas element has a toDataURL() method that gives you a ready-to-use data URL.