javascript - 如何快速逐像素处理图像？

Question

使用 2D canvas context，我实现了一个图像处理算法 具有以下特征的 JavaScript:

• 每一行都可以单独处理。

• 每一行都是从左到右处理的。中一个像素的颜色 输出图像计算自:

  • 输入图像中当前位置的颜色

  • 对于第一个像素之后的所有像素:输出图片的颜色 之前的位置，即向左一个像素

相应算法的运行时间为:O(n)

该算法在 Chrome 52 中非常慢，因为 Canvas 操作很慢:

• 读取输入图像中当前位置的颜色: inputImageData.slice(location, location + 4)

• (读取输出图像中前一个位置的输出颜色是 很快，它取自一个变量)

• 将像素写入输出图像，根据 Chrome 的分析器，它是 花费大部分时间的单个操作:

  outputImageContext.fillStyle = outputColor;
  outputImageContext.fillRect(x, y, 1, 1);
  

我研究了使用 WebGL 进行图像处理。不过好像不适用 因为使用 WebGL 所有像素都是独立计算的。算法 要求从左到右扫描。

Answer 1

对于不理解，我深表歉意:你说输出应该是左边一个像素的输入颜色，但你的“读取”算法说位置 + 4。

但是如果我明白这应该做什么，似乎有一种优化的方法可以做到这一点。在我看来，您正在拍摄图像并将其向右移动一个像素。然后，最左边的空列由之前的第一列像素填充。

使用正确的算法，您应该能够使用原始数据，但复制第一列，是吗？