如何以百分比计算画布的透明区域？

Posted 2023-03-25

【中文标题】如何以百分比计算画布的透明区域？

【英文标题】：How to calculate transparent area of canvas in percentage?

【发布时间】：2020-03-08 06:10:31

【问题描述】：

我正在 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。

【问题讨论】：

我不确定我是否理解您的问题；但是，根据github.com/gokujy/ioniccanvas.github.io/blob/… isTransparent 将始终为false，因为您在调用isTransparent 之前 在同一坐标处绘制笔划（第84 行）。

【参考方案1】：

为此，您需要对画布的引用，对该画布的绘图上下文的引用，并选择何时更新百分比：

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, 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）。