javascript - 加速 Canvas 的 getImageData

我需要从 Canvas 中提取像素块并处理它们。目前我在嵌套循环中多次调用 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;
}

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

非常感谢任何实现 _getChunkFromCache 的帮助。

最佳答案

不要复制，直接索引数组。
获取原始数据数组的一部分需要是一个副本，因为类型数组( ImageData.data 中的数组是类型化数组 Uint8ClampedArray )只有一维，不能索引另一个数组的二维部分。创建副本只会增加更多工作并增加内存使用量，从而进一步减慢您的应用程序的速度。
您最好的选择是让 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);

关于javascript - 加速 Canvas 的 getImageData，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46863683/