CODEWITHSUNDEEP
javascripthtmlcanvas
iceteea
iceteea

Reputation: 1224

How to colorize an image with HTML5-Canvas?

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

Upvotes: 1

Views: 6033

Answers (3)

Nicholas TJ
Nicholas TJ

Reputation: 1659

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

Upvotes: 0

thirtydot
thirtydot

Reputation: 228282

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

Upvotes: 4

thirtydot
thirtydot

Reputation: 228282

You could use Pixastic.

Upvotes: 1

Related Questions