How to colorize an image using HTML5-Canvas?

Question

How can I colorize an image using HTML5-Canvas? Based on the value of Hex or RGB color as input?

Answer 1

Try CamanJS .

The Colorize filter looks exactly the way you want: http://camanjs.com/docs/filters.html#section-13

Evenly shifts the colors in the image to a given color.

The adjustment range is from 0 to 100. The higher the value, the closer the colors in the image are shifted towards the given color correction.

Caman("#image", function () { // Explicitly give the R, G, and B values of the // color to shift towards. // // Arguments: (R, G, B, strength) this.colorize(25, 180, 200, 20); // The other way is to specify a color in hex form: this.colorize("#4090D5", 20); }); 

Additional examples of built-in filters: http://camanjs.com/guides/#BuiltIn

Answer 2

You can use Pixastic .

• http://www.pixastic.com/lib/docs/actions/coloradjust/
• http://www.pixastic.com/lib/docs/actions/hsl/

Answer 3

You can also use Tancolor . This is a lightweight jquery plugin to just colorize your image. You can use the test combination on the interactive page .