be：

• 在canvas元素中加载图像。 查看MDC画布教程




• 触发用户点击画布并获取像素颜色（请参阅下面的链接，了解如何获取像素的颜色），然后查看这个答案获得鼠标位置




• 用用户选择的颜色替换画布中的所有颜色。有关像素操作的一些示例：

  
  
  
  
  
  • 在Mozilla Hacks上使用canvas推送像素
  
  
  • http://beej.us/blog/2010/02/html5s-canvas-part-ii-pixel-manipulation/
  
  
  • 此 JS at mezzoblue apply heavy过滤到图片
  
  

主要是在所有的浏览器像素操作与画布可能非常慢也与小图像。因此，另一个实验可以是获取像素颜色，然后：

• 将颜色信息传递到PHP（或另一个服务器端脚本）用AJAX调用


• 使用 GD 或 imagemagik


• 返回带有Ajax响应的图片


• 使用修改后的图片版本重新载入您的画布

First of all I will explain my situation so you can know my problem a little better. I'm making a HTML5 app. I have a canvas, and using a color picker you can change the color of the canvas. Now i have a picture which I want to put on the canvas but that pictures color needs to be changed using a color picker. So i need to replace, lets say, black color on that picture and put it on the canvas so it dosnt screw up the background.

So that will look like this:
1st color picker- changes the color of the canvas
2nd color picker - replaces the black color on the image with the one in the color picker and puts it on the canvas

Now my problem is how to replace the color on the image without reloading the page.

My only condition is no using silverlight, flash, java or any other similar tehnology that need 3rd party software to be installed on the device.

Thanks in advance. If you dont understand my query fully, feel free to ask.

My approach with a JS only solution could be:

• Loading the image inside a canvas element. Look at the MDC canvas tutorial

• Trigger the user click on the canvas and get the pixel color (see links below to know how to get the color of a pixel) and look at this answer to get the mouse position

• Substitute all the colors in the canvas with the one the user pick. For some examples about pixel manipulation:

  • Pushing pixel with canvas at Mozilla Hacks
  • http://beej.us/blog/2010/02/html5s-canvas-part-ii-pixel-manipulation/
  • This JS at mezzoblue apply heavy filter to an image

After some canvas experiment I notice that mostly in all the browser the pixel manipulation with canvas could be very slow also with small images. So another experiment to do could be to get the pixel color and then:

• pass the color information to a PHP (or another server side script) with an AJAX call
• do the color manipulation with an image library like GD or imagemagik
• return back your image with the Ajax response
• reload your canvas with the modified version of the image