下面我创建了一个简单的测试用例，显示当 img 标签的 src 设置为不同的 dataUrls 时，它会泄漏内存。看起来图像数据在 src 更改为其他内容后从未被卸载。
<!DOCTYPE html>
<html>
<head>
<title>Leak Test</title>
<script type="text/javascript">
canvas = null;
context = null;
image = null;
onLoad = function(event)
{
canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
image = document.getElementById('image');
setTimeout(processImage, 1000);
}
processImage = function(event)
{
var imageData = null;
for (var i = 0; i < 500; i ++)
{
context.fillStyle = "rgba(" + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + "," + Math.random() +")";
context.fillRect(0, 0, canvas.width, canvas.height);
imageData = canvas.toDataURL("image/jpeg", .5);
image.src = imageData;
}
setTimeout(processImage, 1000);
}
</script>
</head>
<body onload="onLoad(event)">
<canvas id="canvas"></canvas>
<img id="image"></img>
</body>
</html>
如果您加载此 html 页面，RAM 使用量会随着时间的推移而增加，并且永远不会被清除。这个问题看起来非常相似:Rapidly updating image with Data URI causes caching, memory leak .我能做些什么来防止这种内存泄漏吗？
最佳答案
我最终解决了这个问题。内存膨胀仅在 image.src 更改时发生，因此我完全绕过了 Image 对象。为此，我获取了 dataUrl，将其转换为二进制 (https://gist.github.com/borismus/1032746)，然后使用 jpg.js (https://github.com/notmasteryet/jpgjs) 对其进行解析。然后，我可以使用 jpg.js 将图像复制回我的 Canvas ，因此 Image 元素完全被 bassed，从而无需设置其 src 属性。
关于javascript - 将 img.src 设置为 dataUrl 会泄漏内存，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19298393/