检查画布像素是否为给定颜色

Question

画布有CSS属性background-color: #D3D3D3;和一个属性ctx.fillStyle = "#000";。这段JS代码需要保留描边并使其他部分透明背景。如何实现？

imageData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;

let clearBack = imageData;
for (var i = 3; i < clearBack.length; i += 4) {
  if (pixle is not black) { //if pixel belongs to the stroke leave it
    clearBack[i] = 0;
  }
}

- Fred J.

Answer 1

你已经接近成功了。你可以逐个检查每4个像素（红色，绿色，蓝色和透明度），并通过imageData检查每种颜色。如果不是黑色，就可以对其进行操作。

你可以使用putImageData将任何修改过的像素重新写回屏幕。但请确保在imageData变量中保留原始ImageData对象。

imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); //take away the .data

var r, g, b, a;

for(var i = 0; i+3 < imageData.data.length; i+=4) {
    r = imageData.data[i];
    g = imageData.data[i+1];
    b = imageData.data[i+2];
    a = imageData.data[i+3];

    if((r > 0 || g > 0 || b > 0) && a > 0) { // if pixel is not black, and not transparent          
        imageData.data[i+3] = 0; //set alpha to 0
    }
}

ctx.putImageData(imageData, 0, 0); //put the imageData back to the screen

这里有一个示例。我在那里做了一些稍微不同的事情，但你可以理解这个想法。 https://jsfiddle.net/q0n5sxku/

- element11

---

数据难道不是这样排列的，第一个像素由前4个值引用，因此数组的第四个值是I+3，即alpha吗？如果是这样，为什么你的代码写成a = imageData.data[i+4]而不是[i+3]？提出这个问题的原因是if块从未被执行。 - Fred J.

我的错误，那是个打字错误。 - element11