您可以在此处查看代码和内存泄漏：http://timzook.tk/javascript/test.html
当我每次从画布上下文调用getimageData(通过setInterval)以使新的ImageData对象重新着色时,这个内存泄漏只发生在我的updateimage()函数中.我本以为javascript的垃圾收集器会破坏旧的垃圾收集器,但如果不是,我不知道如何手动销毁它.任何帮助弄清楚它为什么这样做或如何解决它将不胜感激.
我的问题与这个非常相似：What is leaking memory with this use of getImageData,javascript,HTML5 canvas但是,我需要我的代码来运行setInterval调用的函数中的每一帧,他将它移到setInterval函数之外的解决方案对我来说不是一个选项,我不能离开评论询问他是否找到了解决问题的其他方法.
测试它的人注意：由于此示例使用getimageData,因此只能通过将其放在.html文件中进行本地测试,需要Web服务器.它显然也使用HTML5元素,因此有些浏览器无法使用它.
编辑：*已解决*谢谢,下面的解决方案修复了它.我没有意识到你可以像使用drawImage()中的图像一样使用canvas元素,我重新构建了我的代码,所以它现在使用的内存要少得多.我将此更改的代码上传到上面链接的页面,如果有人想看到它.
解决方法
TempImg.src = ImgCanvas.toDataURL(“image / png”);
实际上,每次执行该行代码时,浏览器“下载”另一个图像并将其存储在存储器中.所以,你最终得到的是一个快速增长的缓存.您可以通过在Chrome中打开网站并查看开发人员工具的资源标签(ctrl shift i)轻松验证这一点.
您可以通过制作TempImgCanvas并将图像数据存储在该画布上而不是在每次调用updateimage()循环后更新图像对象来解决此问题.
我必须离开一段时间,但如果你愿意的话,我可以在几个小时内找到一个例子.
编辑：我重新调整了一些事情并消除了你的缓存问题.你只需要进行两处修改.第一个是用这个替换你的updateimage()函数：
function updateimage() {
var TempImgData = ImgContext.getimageData(0,ImgCanvas.width,ImgCanvas.height);
var NewData = TempImgData.data;
var OrigData = ImgData.data;
//Change image color
var len = 4*ImgData.width*ImgData.height-1;
for(var i=0;i<=len;i+=4) {
NewData[i+0] = OrigData[i+0] * color.r;
NewData[i+1] = OrigData[i+1] * color.g;
NewData[i+2] = OrigData[i+2] * color.b;
NewData[i+3] = OrigData[i+3];
}
//Put changed image onto the canvas
ImgContext.putimageData(TempImgData,0);
}
第二个是更新draw()中的最后一行,如下所示：
drawImg(ImgCanvas,Positions [i] .x,Positions [i] .y,Positions [i] .x Positions [i] .y);
使用这个更新的代码,我们只需参考原始基础(白色)图像数据,并根据每次通过updateimage()函数计算新值.当您调用getimageData()时,您会在画布上收到图像数据的副本,因此,如果您编辑画布或数据,则另一个保持不变.您已经开始抓取原始基本图像数据,因此只使用它而不必在每次更新时重新获取它都是有意义的.
此外,您会注意到我修改了您的循环,稍微改变了图像颜色.通过获取要访问/修改的实际数据数组的句柄,每次进行循环时都可以保存自己必须从父对象解析数组位置.这种技术实际上可以带来非常好的性能提升.你的表现很好,但是因为它非常简单,所以效率更高也不会受到影响.