JavaScript 图像处理无 canvas

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. 将图像放入 canvas 进行转换
3. 从 canvas 获取图像数据
4. 逐像素处理图像数据
5. 再次将数据放入 canvas
6. 从 canvas 导出数据为 base64 图像
7. 从导出的 base64 图像创建最终图像

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

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

Answer 1

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

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

   5. 从 canvas 导出数据为 base64 图像
   6. 从导出的 base64 图像创建最终图像

由于我们再次将数据添加到最终的 canvas 中，我们可以将当前 canvas 与处理后的图像一起发送，因为 canvas 可以接受另一个 ZFCC790C72A86F55CZ 到 5 as add490C72A86DDC6FCC5D1 内的图像。

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

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

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

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