Canvas 具有 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
var 中。
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
这是一个 fiddle 。我在那里做了一些稍微不同的事情,但你明白了。
关于javascript - 检查 Canvas 像素是否为给定颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38871779/