如何使用HTML5-Canvas着色圖像？

Question

如何使用HTML5-Canvas為圖像着色？ 基於十六進制或RGB顏色值作為輸入？

Answer 1

試試CamanJS 。

Colorize過濾器看起來完全像您想要的： http : //camanjs.com/docs/filters.html#section-13

將圖像中的顏色均勻地移向給定的顏色。

調整范圍是0到100。值越大，圖像中的顏色越接近給定的調整顏色。

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

有關內置過濾器的更多示例，請訪問： http : //camanjs.com/guides/#BuiltIn

Answer 2

您可以使用Pixastic 。

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

Answer 3

您也可以使用Tancolor 。 這是一個輕量級的jquery插件，僅用於着色圖像。 您可以在交互式頁面上試用組合。