如何使用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插件，只是为图像着色。您可以在interactive page上试用组合。