2

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.

LordShigi
  • 25
  • 1
  • 4
  • can show your app please ? Are you looking for something similar to this http://mrdoob.com/projects/harmony ?? –  Nov 28 '10 at 21:00
  • No exactly, im making a app for a company which would show how can their interior design product look on different wall colors. – LordShigi Nov 29 '10 at 15:29

1 Answers1

2

My approach with a JS only solution could be:

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
Community
  • 1
  • 1
yuri
  • 575
  • 1
  • 14
  • 33
  • Thanks, i will try using AJAX to induce color changing with PHP and load it back on canvas. I still have some dark spots in the whole process, but i will google them. I came here to find a perspective. – LordShigi Nov 29 '10 at 15:43
  • 1
    I would advise using the pure-JS solution, because even if the canvas pixel manipulation is slow in some browsers, using AJAX will be slower and would involve unnecessary network traffic. – Massimiliano Torromeo Nov 29 '10 at 20:24