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.


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

Need Your Help

How to use onchange in HTML

javascript html

I have two text box in html ie:

How do I add an exception to a query that finds the most popular records?

mysql sql

I am building a website where users submit screencasts and associate with them, tags.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.