加速画布的getImageData

Question

我需要从画布中提取像素块并对它们进行处理。目前，我在嵌套循环中多次调用getImageData。

_getBinaryStringFromCanvas(canvas) {
  let ctx = canvas.getContext('2d')
  let { xMaxBlock, yMaxBlock, blockSize } = this.metrics;
  let results = '';
  for (let y = 0; y < yMaxBlock; y++) {
    for (let x = 0; x < xMaxBlock; x++) {
      let data = ctx.getImageData(x * blockSize, y * blockSize, blockSize, blockSize);
      let digit = this._somehowProcessTheData(data);
      binaryString += digit;
    }
  }
  return binaryString;
}

这是非常慢的，因为xMaxBlock和yMaxBlock可能非常大。理想情况下，我想做这样的事-

_getChunkFromCache(cache, x, y, width, height){
  // need help implementing this function
}

_getBinaryStringFromCanvas(canvas) {
  let ctx = canvas.getContext('2d')
  let { xMaxBlock, yMaxBlock, blockSize } = this.metrics;
  let results = '';
  let cache = ctx.getImageData(0, 0, xMaxBlock * blockSize, yMaxBlock * blockSize);
  for (let y = 0; y < yMaxBlock; y++) {
    for (let x = 0; x < xMaxBlock; x++) {
      let data = this._getChunkFromCache(cache, x * blockSize, y * blockSize, blockSize, blockSize);
      let digit = this._somehowProcessTheData(data);
      binaryString += digit;
    }
  }
  return binaryString;
}

但我似乎无法理解getImageData返回的平面数组中由x、y、宽度、高度指定的区域所需的逻辑。

任何实现_getChunkFromCache的帮助都将受到高度赞赏。

Answer 1

不要复制，直接索引数组。

获取原始数据数组的一个子部分需要一个副本，因为类型数组( ImageData.data中的数组是类型化数组Uint8ClampedArray)只是一维的，不能索引另一个数组的2D部分。创建一个副本只会增加更多的工作，增加内存使用量，从而进一步减缓应用程序的运行速度。

最好的选择是somehowProcessTheData函数直接处理图像数据，并将数组索引到所提供的边界。

function somehowProcessTheData(imageData, x, y, w, h){
    var i,j;
    var result = ""; 
    var r,g,b,a;
    const data = imageData.data;

    for(j = 0; j < h; j++){
        var idx = (x + (y + j) * imageData.width) * 4;  // get left most byte index for row at y + j
        for(i = 0; i < w; i++){
             r = data[idx ++];
             g = data[idx ++];
             b = data[idx ++];
             a = data[idx ++];
             // do the processing
        }
     }
     return result;
 }

或

function somehowProcessTheData(imageData, x, y, w, h){
    var i,j;
    var result = ""; 
    const data = imageData.data;

    for(j = 0; j < h; j++){
        var idx = (x + (y + j) * imageData.width) * 4;  
        for(i = 0; i < w; i++){
             // get the red green blue values
             var blah = data[idx] + data[idx + 1] + data[idx + 2];
             // do the processing
             // ...
             // increment the index to the next pixel.
             idx += 4;

        }
     }
     return result;
 }

然后在调用循环中

 let data = this.processTheData(cache, x * blockSize, y * blockSize, blockSize, blockSize);

Answer 2

你可以把你工作的整个区域都藏起来。它仍然很慢，但希望你不需要经常这样做。下面是一个示例，用于获取每个像素的int值，而不是4个字节。

const pixels = new Int32Array(ctx.getImageData(0, 0, w, h).data.buffer)
pixels[x + y * w]