您的调用不会导致内存泄漏getImageData()
。你的问题的根源是这一行:
TempImg.src = ImgCanvas.toDataURL("image/png");
实际上,每次执行该行代码时,浏览器都会“下载”另一个图像并将其存储在内存中。因此,您最终得到的实际上是一个增长非常快的缓存。您可以通过在 Chrome 中打开站点并检查开发人员工具的资源选项卡来轻松验证这一点(ctrl+shift+i
).
您可以通过创建一个来解决这个问题TempImgCanvas
并将图像数据存储在该画布上,而不是在每次调用后更新图像对象updateimage()
loop.
我必须离开一段时间,但如果您愿意,我可以在回来后几个小时内编写一个示例。
Edit:我对事情进行了一些重组并消除了您的缓存问题。您只需要做两处更改。第一个是替换你的updateimage()
与此功能:
function updateimage() {
var TempImgData = ImgContext.getImageData(0, 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, 0);
}
第二个是更新最后一行draw()
阅读如下:
drawImg(ImgCanvas, Positions[i].x, Positions[i].y, Positions[i].x+Positions[i].y);
使用此更新的代码,我们只需引用原始基础(白色)图像数据,并在每次遍历时根据该数据计算新值updateimage()
功能。你打电话时getImageData()
你收到一个copy画布上的图像数据,因此如果您编辑画布或数据,另一个保持不变。您一开始就已经获取了原始基础图像数据,因此只需使用它就有意义,而不必在每次更新时重新获取它。
另外,您会注意到我修改了循环,稍微改变了图像颜色。通过获取要访问/修改的实际数据数组的句柄,您就不必在每次循环时从父对象解析数组位置。这项技术实际上带来了相当不错的性能提升。你的表现一开始就很好,但提高效率也没什么坏处,因为它非常简单。