使用Canvas drawImage方法在Google Chrome中增加奇怪的内存

Question

我开发了一个具有约160张图像的应用程序。我正在创建160 img元素并加载它们。加载后，我使用HTML5 canvas元素显示它们。我正在使用drawImage在画布上显示图像。

我的问题是，只有在谷歌浏览器中，内存总是在增加。在其他浏览器（例如firefox或IE11）中，我的应用使用了大约260-300 MB，但是在chrome中使用了大约1,4 GB，这太多了。当我调用drawImage方法时，内存仅在增加。我已经尝试过画布上下文的clearRect方法，并且还尝试过重新创建画布（删除+附加组合）。

我的问题有可能解决的办法吗？它是镀铬的虫子吗？我已经使用chrome的任务管理器对其进行了测试。我已经看到，图像缓存也在增加，但是这对我来说并不合逻辑，因为我只加载了1次图像，而我只是将它们与drawImage方法一起使用。

谢谢您的体会。

Answer 1

我有一个类似的问题，使用非常大的图像（3000x2000）的图像循环来在上传之前生成预览：

1. 首先，我加载图像 ( image.src = url)。
2. 加载图像后，我通过 canvas drawImage ( canvas.drawImage(image, ...))调整它的大小
3. 然后我从画布上下文中获取 dataURL。
4. 之后，我通过删除引用来丢弃图像和画布。

这会导致（仅在 Chrome 35 中）持续消耗内存，然后耗尽内存。image.src = null我解决了在删除图像之前使图像无效的问题。

非常奇怪的行为是，如果我使用 DevTools 来分析内存使用情况（我显然怀疑这是由我的代码生成的内存泄漏），则内存消耗不再发生，并且当我删除图像时总是会调用垃圾收集器。