我需要检查FabricJS中的画布上是否有任何空白区域并显示警报。我认为可以通过检测画布上的像素来完成,但我不知道。怎么做?
最佳答案
要获取像素数据,您需要访问2D上下文。要在FabricJS中做到这一点,您必须调用StaticCanvas.getContext();
,标准织物画布将在原型链中包含此元素。Fabric StaticCanvas doc
从那里获取像素数据
var ctx = yourCanvas.getContext(); // your canvas is the Fabric canvas
var pixelData = ctx.getImageData(0,0,ctx.canvas.width, ctx.canvas.height);
要访问单个像素,您必须计算索引,然后检索构成一个像素的4个字节,每个红色,绿色,蓝色和alpha字节一个字节。
拥有pixelData后获取像素的函数。
// pixelData is the pixel data, x and y are the pixel location
function getPixel(pixelData,x,y){
// make sure the coordinate is in bounds
if(x < 0 || x >= pixelData.width || y < 0 || y >= pixelData.height){
return {
r : 0,
g : 0,
b : 0,
a : 0
};
}
// get the index of the pixel. Floor the x and y just in case they are not ints
var index = Math.floor(x) * 4 + Math.floor(y) * 4 * pixelData.width;
// return the pixel data
return {
r : pixelData.data[index++],
g : pixelData.data[index++],
b : pixelData.data[index++],
a : pixelData.data[index++]
};
}
那应该可以帮助您找到空白区域。请注意,当alpha为零时,红色,绿色和蓝色也将为零。上面的函数非常慢,因此不适用于您的问题,它仅显示如何从pixelData获取像素以及如何获取像素地址(索引)。