CODEWITHSUNDEEP
javascriptjqueryhtml
Philipp
Philipp

Reputation: 69663

Pixel-based manipulations of images in DOM

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.

Upvotes: 0

Views: 123

Answers (1)

lanzz
lanzz

Reputation: 43168

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

Upvotes: 3

Related Questions