javascript - 使用 Canvas 和 JS 将图像转换为单色并用彩色替换黑色

Question

我正在尝试编写一些 JS，它将图像转换为灰度，并将黑色转换为颜色(在本例中为粉红色)。我想要达到的效果如下图所示(左为原图，右为想要的结果):

我尝试过使用 CamanJS，并且使用灰度滤镜和纯粉红色叠加以及乘法混合模式得到了一些接近的东西。 JS 看起来像:

$(function () {
    var $images = $('.make-pink');
    $images.each(function () {
        createPinkImage( $(this) );
    });
});


function createPinkImage ( $image ) {
    var $canvas = $('<canvas />');
    var canvas = $canvas[0];
    var imgSrc = $image.attr('src');
    var canvasWidth = $image.parent().width();
    var canvasHeight = $image.parent().height();

    var pink = '#d65fb3';

    $canvas
        .attr('width',canvasWidth)
        .attr('height',canvasHeight)
        .appendTo($('#canvas-container'));

    var image = new Image();
    image.src = imgSrc;

    image.onload = function() {

        Caman( canvas, imgSrc, function () {

            this.greyscale();

            this.newLayer(function () {
                this.fillColor(pink);
                this.setBlendingMode('multiply');
                this.opacity(70);
            });
            this.exposure(40)
            this.render();
        });
    }
}

我尝试在 jsfiddle 中实现这一点，但它没有产生结果。无论如何，这是链接:http://jsfiddle.net/303L2xL4/1/

这是结果的屏幕截图:

如您所见，它并不完全存在!

任何帮助都会非常好。我不打算使用 CarmanJS，是否有更好的解决方案可以使用另一个库，甚至只是普通 JS

Answer 1

这是因为黑色会产生黑色结果，因为黑色为 0，并且如您所知，任何与 0 相乘的值都将保持为 0(深灰色将产生接近黑色的值，依此类推)。

要解决此问题，您必须先为灰度图像添加亮度效果，然后设置其颜色(也可能进行轻微的对比度调整)以强制将值从 0 调高。

您还可以通过 RGB-HSL/HSV 转换插入像素，调整亮度 (L/V)，然后转换回 RGB。这在原则上与线性亮度相同，但最终通常具有更好的结果/质量。