我正在Ionic 4中制作绘图应用程序，在此应用程序中，我使用drawImage在画布中添加了编号为1的图像，其余图像背景是透明的。如果用户（孩子）在数字1图像之外绘制，则百分比将降低。为此，我进行了搜索，但没有找到任何东西，但是我发现单击以查找像素是否透明。
isTransparent(x,y) { // x,y coordinate of pixel
let alpha = this.ctx.getImageData(x,y,1,1).data[3]; // 3rd byte is alpha
if (alpha === 0) {
this.accuracy = 0;
console.log("Transparent image clicked!");
} else {
this.accuracy = 100;
console.log("image clicked!");
}
}
我在GitHub上添加的code sample是live Demo。
为此，您将需要对画布的引用，对画布的绘图上下文的引用，并选择何时更新百分比：
1）检索画布（例如，使用getElementById）：
var canvas = document.getElementById('id_of_the_canvas');
2）检索drawing context
var ctx = canvas.getContext('2d');
3）检索image data（所有图像数据）
var imageData = ctx.getImageData(0,canvas.width,canvas.height);
4）确定在哪一点考虑像素透明（透明度阈值），并计算透明像素和非透明像素之间的比率，请使用imageData.data进行更快的计算：
var pixelCount = canvas.width * canvas.height;
var arrayElemsCount = pixelCount * 4; // for components (rgba) per pixel.
var dataArray = imageData.data;
// 0 is completely transparent,set to 0.5 to
// allow for instance semi transparent pixels to be accounted for
var threshold = 0;
var transparentPixelCount = 0;
// remember fourth (index = 3) byte is alpha
for (var i = 3; i < arrayElemsCount; i+= 4) {
var alphaValue = dataArray[i];
if (alphaValue <= threshold) {
transparentPixelCount++;
}
}
var transparencyPercentage = (transparentPixelCount / pixelCount) * 100;
此操作的计算量很大，因此请选择合适的执行时间：自上次绘制操作起经过一段时间（绘制期间为debounce），或者绘制期间以固定间隔（绘制期间为throttle）