2

I have some png vectors with transparent backgrounds that I want to color overlay on the fly, so users can choose a vector and then choose which color they want it from a picker.

Only stipulation is that they cant be masked with background colors, because multiple pngs will be loaded onto the same canvas and will need to overlap.

How exactly do I go about loading an image into a canvas and then overlaying it with a certain color?

Edit: I have found some info here and here ( - answer by Nathan ) which sort of work, but not in all browsers.

The second one especially as I need only the png itself to be overlayed, and the transparencey to stay transparent

Community
  • 1
  • 1
Horse
  • 3,023
  • 5
  • 38
  • 65
  • And your question is? (probably good to check out the [FAQ](http://stackoverflow.com/faq)) – cambraca Nov 25 '10 at 22:49
  • sorry, half asleep and brain dead from searching. specific question added. – Horse Nov 25 '10 at 22:55
  • 1
    it sounds like you want to change your background color base on color picker chosen by your user. This can be easily done with CSS, or am I missing something. Or you want to lay a color overlay on top of your image? Check out https://github.com/jseidelin/pixastic or http://nicolaisi.github.io/tancolor/ – Nicholas TJ Nov 12 '13 at 15:36
  • @NicholasTJ thanks for the reply, although this was 3 years old ;) Don't really need it anymore, but thanks for the response, they seem to be what I was asking for. If you reply with an answer I'll accept it :) – Horse Nov 13 '13 at 15:39

1 Answers1

1

Practically you want to load the image into canvas and overlay it with a certain color, that will give a color effect to the overall image.

This jQuery plugin does exactly that, it loads the image into canvas, manipulates the color giving the nice tinting effect and convert it back to image element. Converting this back into image element is a very important part, as some user may style their CSS base on img element, instead of ID or class.

Just play with the interactive demo:

and go through the docs:

Have fun.

Jordan.J.D
  • 7,999
  • 11
  • 48
  • 78
Nicholas TJ
  • 1,629
  • 18
  • 30