html5 data image,使用HTML5 getImageData泄漏javascript内存

您没有通过调用getImageData()获得内存泄漏.您的问题的根源是这一行：

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()时,您会在画布上收到图像数据的副本,因此,如果您编辑画布或数据,则另一个保持不变.您已经开始抓取原始基本图像数据,因此只使用它而不必在每次更新时重新获取它都是有意义的.

此外,您会注意到我修改了您的循环,稍微改变了图像颜色.通过获取要访问/修改的实际数据数组的句柄,每次进行循环时都可以保存自己必须从父对象解析数组位置.这种技术实际上可以带来非常好的性能提升.你的表现很好,但是因为它非常简单,所以效率更高也不会受到影响.