將圖像轉換爲單色，並使用Canvas和JS替換黑色使用Canvas和JS

我想寫一些JS將圖像轉換爲灰度，並將黑色轉換爲顏色（在這種情況下爲粉色）。我想達到以下所示的效果（左邊是原始的，右邊是期望的結果）：將圖像轉換爲單色，並使用Canvas和JS替換黑色使用Canvas和JS

enter image description here

我使用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/

而這裏的結果的截圖：

enter image description here

正如你所看到的，它不是相當有！

任何幫助都會非常棒。我沒有承諾使用CarmanJS是有更好的解決方案，與另一個庫甚至只是香草JS

來源

2014-10-30 bravokiloecho

這是因爲黑色會產生黑色的結果，因爲黑色是0，如你所知任何事情乘以0將保持0（深灰色會產生接近黑色的值等等）。

爲了解決這個你將不得不前添加亮度效果的灰度圖像設定它的顏色（和可能的輕微對比度調整爲好），以從0

您強制值高達也可以通過RGB-HSL/HSV轉換推動像素，調整亮度（L/V），然後轉換回RGB。原則上這與線性亮度相同，但最終通常具有更好的結果/質量。

來源

2014-10-30 13:34:45 K3N

然後乘以逆:)評論因爲小提琴似乎不適合我;但是，第1步：將圖像轉換爲灰色，2.倒轉; 3.乘以'粉紅'的倒數：'＃29a04c'; 4.再次翻轉; 5.粉紅色！ – usr2564301 2014-10-30 13:49:52

感謝你們倆。這似乎運作良好。反轉技術增加了一個很好的活力。 – bravokiloecho 2014-10-30 16:33:23

將圖像轉換爲單色，並使用Canvas和JS替換黑色使用Canvas和JS

回答

相關問題