Question

是否可以保留对实际imageData的引用，而不是每帧调用getImageData？

问题是我在画布上下文中调用getImageData时需要读取实际数据时，以一致的间隔获得fps下降。

当页面加载时，我首先创建一个足以容纳imageData.data的数组，这样就不会每帧都分配内存。要更新该数组，我必须在画布上下文中调用getImageData。如果我像这样运行javascript，每隔几秒就会有大约60到20-30的fps下降。

当我注释掉调用getImageData的行时，脚本在60fps左右顺利运行

例如，

此代码将导致fps下降

// initialize m_canvasData
var m_canvasData = m_canvasContext.getImageData(0, 0, m_width, m_height).data;

// called every frame
function loop()
{
    m_canvasData = m_canvasContext.getImageData(0, 0, m_width, m_height).data;
}

此代码不会导致fps下降

var m_canvasData = m_canvasContext.getImageData(0, 0, m_width, m_height).data;

// called every frame
function loop()
{
   // m_canvasData = m_canvasContext.getImageData(0, 0, m_width, m_height).data;
}

我想保留对画布数据的引用，而不是每次都调用getImageData。如果可能的话。

我不是专家，但我确实知道DOM会在某个地方到位，所以如果无法保存对画布数据地址的引用，那么获取数据最有效的方法是什么？

当我给它一个画布用作纹理时，Three.js能以某种方式获得60fps，所以我知道在获取画布数据时有一些方法可以获得fps下降

代码中只有一个线程，所以我不相信它应该是一个多线程问题，其中getImageData必须等待另一个javascript线程（虽然它可能等待浏览器完成绘制画布？但是浏览器以60-61 fps的速度刷新，所以我不认为这个问题也是如此）

Answer 1

如果你不断调用.getImageData，那么你的FPS正在下降是有道理的，因为它涉及复制和传输大量内存。此外，.getImageData不使用GPU，因此处理负担会传递到您可能很忙的CPU上。

不...你不能对画布的图像数据保持“实时”参考。

var idata=context.getImageData(0,0,canvas.width,canvas.height);

...返回当前画布内容像素的静态“快照”。如果在画布上绘制新内容，则idata将不包含新绘图。

您的问题没有足够的信息来帮助我们了解更多细节，但常见的解决方法是将您的应用重构为不使用.getImageData。

保持对javascript canvas imageData的引用

1 个答案: