Pixel-based manipulations of images in DOM

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

canvas元素具有toDataURL()方法 ，该方法为您提供了立即可用的数据URL。