1

how can I colorize an Image with HTML5-Canvas? Based on an Hex- or RGB- Color Value as input?

iceteea
  • 1,214
  • 3
  • 20
  • 35

3 Answers3

5

Try CamanJS.

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

Uniformly shifts the colors in an image towards the given color.

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

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);
});

For more examples of built in filters: http://camanjs.com/guides/#BuiltIn

thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • I also had to adjust the brightness when using a black and white icon: this.brightness(50).render(); – schmunk Mar 17 '12 at 02:19
1

You could use Pixastic.

thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • Did I understand right that I have to use -1 or +1 with that library? What I want is to define a color and the canvas colorizes that image, like a greyscale image is colorized to #0000ff (blue). – iceteea Jun 28 '11 at 07:46
  • Well, you'd need some extra code to transform a hex color input into the right arguments to pass to Pixastic. – thirtydot Jun 28 '11 at 08:34
  • 1
    Pixtastic colorization does NOT work with IE9. I also found that it no colorization option. To actually set a color, set the color to 1,1,1 first, then reget the image context, then set it to whatever color you want. – Doug Wolfgram Nov 06 '12 at 04:08
0

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

Nicholas TJ
  • 1,629
  • 18
  • 30