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

Question

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

我已经尝试过使用 CamanJS，并且使用灰度滤镜和纯粉红色叠加层以及混合模式 multiply 得到了一些接近的东西。这个的 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 是否有更好的解决方案与另一个库或什至只是 Vanilla JS

Answer 1

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

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

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