Как раскрасить изображение с помощью HTML5-Canvas?

Question

как я могу раскрасить изображение с помощью HTML5-Canvas?На основе значения цвета Hex или RGB в качестве входных данных?

Answer 1

Попробуйте CamanJS .

Фильтр Colorize выглядит именно так, как вы хотите: http://camanjs.com/docs/filters.html#section-13

Равномерно смещает цвета изображения в направлении заданногоcolor.

Диапазон регулировки составляет от 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, чтобы просто раскрасить изображение. Вы можете попробовать комбинацию на интерактивной странице .