使用getImageData和/或putImageData在canvas中发生内存泄漏

Question

我正在创建一个实时视频编辑器，允许您使用画布添加某些视频效果。您会在我的代码中注意到，我实际上有两个canvas元素。这个过程是：

1. <video>开始无形地使用CSS。
2. 可见<canvas>将视频渲染到画布上。
3. 为了添加实时效果，我需要另一个隐藏的<canvas>来处理视频图像，然后将处理后的帧返回到可见的<canvas>。这是我使用getImageData()和putImageData()
的地方

我现在看到chrome中的内存泄漏。我发现很多线程都在讨论这个问题，但我找不到解决方案。

我删除了“视频效果”代码，用于测试目的和小提琴。在没有效果处理的情况下，它仍会发生内存泄漏。

FIDDLE： http://jsfiddle.net/o8z4ocLd/

使用Chromes任务管理器（汉堡菜单 - ＆gt;更多工具 - ＆gt;任务管理器）观看Memory

你会注意到内存爬升然后再下降，只会比上一次上升。我已经看到它很好地升级到1 + GB的内存使用量，最终导致选项卡崩溃。我尝试了setTimeout和requestAnimationFrame的不同变体。所有这些似乎都会导致内存泄漏。

修改

值得一提的是，这似乎只发生在Chrome中。 Firefox似乎更好地处理垃圾收集。我还没有看到firefox超过500mb。

Answer 1

所以我的Chrome今天早上自我更新到第45版。 45月9日问世。 2015年1月，这个问题似乎已经解决了！我不再收到内存泄漏。此更新还解决了我在此主题中遇到的另一个问题：

Canvas is stretching using drawImage