在html5中將圖像顏色更改為灰度

Question

我有一個png圖像，我想將其轉換為灰度。 我設法將其轉換為灰度，但它也改變了圖像透明區域的顏色。 如何在不更改圖像透明區域的情況下更改顏色？

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = 'image.png';
ctx.drawImage(img, 0, 0);

var imageData = ctx.getImageData(0, 0, 420, 420);
var px = imageData.data;

var len = px.length;

for (var i = 0; i < len; i+=4) {
    var redPx = px[i];
    var greenPx = px[i+1];
    var bluePx = px[i+2];
    var alphaPx = px[i+3];

    var greyScale = redPx * .3 + greenPx * .59 + bluePx * .11;

    px[i] = greyScale;
    px[i+1] = greyScale;
    px[i+2] = greyScale;
    px[i+3] = greyScale;
}

ctx.putImageData(imageData, 0, 0);

Answer 1

阿爾法是“不是一種顏色”。 您應該按原樣復制它，使透明部分保持透明。 只需刪除該行：

px[i+3] = greyScale;

Answer 2

我不完全確定這個目的，但由於問題也標記為“HTML5”，我認為可能需要與圖像處理庫不同的目的。 如果那不是某種圖像編輯器或HTML5游戲，你只需要將一些圖像轉換為灰度，例如懸停，你也可以使用CSS：

.grayscale {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

如果這不合適，請發布有關您為什么需要這樣做的更多信息

Answer 3

這個插件（tancolor.js）做了你想要實現的類似的事情，你可以嘗試檢查源代碼，並且有一個可以讓你測試的東西。