检查画布像素是否具有给定的颜色

check if canvas pixel is of a given color

本文关键字：颜色 是否 布像素 像素 检查      更新时间：2023-09-26

画布有一个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;
  }
}

你很接近了。您可以遍历每4个像素(红绿蓝alpha)，并使用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/

相关文章：