保留对 JavaScript canvas imageData 的引用

keep reference to javascript canvas imageData

本文关键字：引用 imageData canvas JavaScript 保留      更新时间：2023-09-26

是否可以保留对实际图像数据的引用，而不是每帧都调用getImageData？

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

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

当我注释掉调用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 在某个地方到位，所以如果无法保存对画布数据地址的引用，那么获取数据最有效的方法是什么？

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

代码中只有一个线程，所以我认为这不应该是一个多线程问题，getImageData 必须等待另一个 javascript 线程（尽管也许它正在等待浏览器完成绘制画布？但浏览器以 60-61 fps 刷新，所以我也不认为这是问题所在）

如果您

不断调用.getImageData，您的 FPS 下降是有道理的，因为它涉及复制和传输大量内存。此外，.getImageData不使用 GPU，因此处理负担会转移到可能繁忙的 CPU 上。

不。。。您无法保留对 Canvas 图像数据的"实时"引用。

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

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

你的问题不包含足够的信息来帮助提供更多详细信息，但常见的解决方法是重构你的应用以不使用.getImageData。

相关文章：