HTML5 获取画布中的 alpha 像素数答案

【问题标题】：HTML5 get number of alpha-pixels in canvasHTML5 获取画布中的 alpha 像素数
【发布时间】：2012-02-23 15:51:25
【问题描述】：

我需要获取画布中透明/不透明像素的比率。最好的方法是什么？

更新：根据以下帖子，我最终编写了这段代码：

function getNumberOfAlphaPixels(can) {
    var step = 200; //We skip 200 pixels to make it work faster
    var ctx = can.getContext('2d');
    var imgd = ctx.getImageData(0, 0, can.width, can.height);
    var pix = imgd.data;
    var alphaPixelsNum = 0;

    for (var i = 0; i < pix.length; i += 4*step) {
        if (pix[i+3] == 0) {
            alphaPixelsNum += step;
        }
    }

    return alphaPixelsNum;
}

【问题讨论】：

标签： html canvas alpha alpha-transparency

【解决方案1】：

如前所述，计算单个不透明像素是唯一的方法。

以下可能比其他答案中显示的伪代码更快。尽管有 JIT 跟踪/代码分析，但它确实有助于加快阐明基本低级操作的速度。

function alphaRatio(ctx) {
  var alphaPixels = 0;

  var data = ctx.getImageData(0,0, ctx.canvas.width,ctx.canvas.height).data;
  for(var i=3; i<data.length; i+=4) {
    if(data[i] > 0) alphaPixels++;
  }

  return alphaPixels / (ctx.canvas.width * ctx.canvas.height);
}

【讨论】：

这比我的伪代码快。你是说最后一行的alphaPixels 吗？

【解决方案2】：

当涉及到画布上的像素时，您别无选择，只能使用getImageData() - .data 来获取它们，结果是 RGBA 顺序的数据字节数组。不要期望由此获得出色的性能，但如果这是你必须要做的......

【讨论】：

【解决方案3】：

数一数（伪代码）：

var alphaPixels, alpha, totalPixels

for each pixel (x, y)
    alpha = imageData.data[((y*(imageData.width*4)) + (x*4)) + 3] // <- real code
    //                                 offset to alpha channel ^
    if (alpha > 0)
        alphaPixels++

return alphaPixels / totalPixels

参考

Pixel manipulation^MDN

【讨论】：