没有画布的 JavaScript 图像处理

Question

我正在使用 Angular 8，我通过 Web 套接字（signalR 流）从服务器获取了几个 png base64 图像。更准确地说：我每秒收到 15 个响应（15 帧），每个响应都有 3 个新图像。

我需要处理这些图像并将它们呈现给用户（当前在画布中）。

到目前为止我做了什么：

const image = new Image();
image.onload = () => {

    this.canvasForConversionContext.drawImage(image, 0, 0, image.width, image.height);
    const imageData = this.canvasForConversionContext.getImageData(0, 0, image.width, image.height);

    // loop trought the image and change color (it can be done in web worker (separate threed))
    this.processImagePixelByPixel(imageData.data);

    // back to canvas to convert processed image data to new image
    this.canvasForConversionContext.putImageData(imageData, 0, 0);
    const finalImage = new Image();
    finalImage.onload = () => {
      // here are get the final image
    };
    finalImage.src = this.canvasForConversion.toDataURL();

};
image.src = imageFromTheServerInBase64Format;

这个简单的图表呈现过程。

下面这些步骤是对上面代码的解释：

1. 将从服务器获取的图片加载到图片标签中
2. 将图像放入画布进行转换
3. 从画布中获取图像数据
4. 逐像素处理图像数据
5. 再次将数据放入画布
6. 将画布中的数据导出为 base64 图像
7. 从导出的 base64 图像创建最终图像

这是已经完成的事情，并且可以正常工作，但是工作速度非常慢。 当前代码中的任何其他技术或建议如何加快此过程？

我试图避免使用画布来处理图像数据，但我没有找到任何相关信息。 除了画布（某些库）之外，还必须有其他东西来处理图像像素？

Answer 1

我在这里改变了几件事，解决了我的问题：

1. 我们不需要上面列表中的最后两个步骤（6 和 7）：

   5. 将画布中的数据导出为 base64 图像
   6. 从导出的 base64 图像创建最终图像

由于我们再次将数据添加到最终画布中，我们可以将处理后的图像发送当前画布，因为画布可以接受另一个画布作为图像添加到里面。

1. 我们将流处理和处理数据分离到另一个工作线程（网络工作者），并将已经准备好的数据发送到主线程。 同样非常重要的部分是，我们仅在主线程准备好时才将数据发送到主线程，因为我们不想让大量数据溢出主线程。如果我们向他发送无法处理的数据，主线程会变得非常慢。与此同时，在流式线程中，我们将所有处理过的数据放入队列中，直到主线程没有发送它准备好并需要更多数据的通知。 如何设置 signalR 流式传输到另一个线程，您可以在此处找到：Is it possible to create signalR streaming connection in web worker

2. 我们将从服务器获取的图像数据从 base64 图像更改为行数组。例如：[3, 5, 34, 3, 6, 34, 3, 7, 35] 其中每 3 个值出现 [x, y, line length]。

   以这种格式从服务器获取的数据更小，更容易处理，因为我们不需要将图像加载到画布中来获取像素数据，我们可以立即创建图像数据并处理它们。

通过这 3 个改进步骤，我们实现了所需的性能。