HTML5 中的高性能像素操作答案

【问题标题】：High performance pixel manipulation in HTML5HTML5 中的高性能像素操作
【发布时间】：2018-09-04 15:05:21
【问题描述】：

我是新尝试在 HTML5/JS 中高速图像显示。我对 HTML5/JS 相当陌生，正在尝试评估可用于在屏幕上呈现图像的选项。

输入是一个像素数组。

我玩过 CanvasRenderingContext2D，并使用画布和 putImageData 将像素渲染到屏幕上，但随着图像大小的增加，我的 FPS 会变慢。我要解决的用例是将原始像素数组渲染到屏幕上，而不是绘制形状/图形。我的目标是以尽可能高的 FPS 进行渲染。

        var imageCanvas = document.getElementById('imageCanvas');
        var imageContext = imageCanvas.getContext('2d', { alpha: false });
        var pixelData = imageContext.createImageData(imageWidth, imageWidth);
        // ---------------------------------------------------------
        // here: Fill up pixelData with image pixels to be rendered
        // ---------------------------------------------------------
        imageContext.putImageData(pixelData , 0, 0);

对于这样的用例，我应该如何进行？我在很多地方读到 putImageData 是这里的瓶颈，更好的方法是使用 DrawImage。是否可以避免使用 putImageData 并使用 DrawImage 从 pixelData 读取并渲染？
GPU 的使用效率如何？
WebGLRenderingContext 适合这种情况吗？

【问题讨论】：

是整个代码吗？一个 putImageData() 调用有很多样板......
抱歉，我可以用更高效的方式渲染吗？
理想情况下，您每次只需要调用putImageData
是的，是的。我也在做同样的事情.. 其余代码就像 init，putImageData 运行多个迭代，具有不同的像素集

标签： javascript html image-processing

【解决方案1】：

用于 html 画布上的高性能图形。只有一种方法可以做。它通过使用glES提供的webgl。

使用核心 opengl 可能很烦人，因此您可能需要使用一些库，例如 Three.js 或 pixijs

【讨论】：