HTML5 получить количество альфа-пикселей на холсте - PullRequest
Новая
       45

HTML5 получить количество альфа-пикселей на холсте

2 голосов
/ 01 февраля 2012

Мне нужно получить соотношение прозрачных / непрозрачных пикселей на холсте.Каков наилучший способ сделать это?

ОБНОВЛЕНИЕ: Основываясь на приведенных ниже постах, я написал этот код: 

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;
}

Ответы [ 3 ]

7 голосов
/ 01 февраля 2012

Как уже упоминалось, подсчет отдельных непрозрачных пикселей - единственный способ сделать это.

Следующее, вероятно, быстрее, чем псевдокод, показанный в другом ответе.Несмотря на 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);
}
1 голос
/ 01 февраля 2012

Подсчет до (псевдокод): 

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

Ссылка

1 голос
/ 01 февраля 2012

Когда дело доходит до пикселей на холсте, у вас нет выбора, кроме как захватить их все с помощью getImageData() - .data, в результате вы получите байтовый массив данных в порядке RGBA.Не ожидайте от этого большой производительности, но если это то, что вам нужно сделать ...

...