使用getImageData和putImageData在画布中内存泄漏

Question

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

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

现在我看到chrome中的内存泄漏。我发现许多线索都在谈论这个问题，但我一直无法找到解决方案。

我删除了用于测试目的和小提琴的“视频效果”代码。它仍然没有效果处理的内存泄漏。

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

观看Memory使用铬合金任务管理器（汉堡菜单 - >更多工具 - >任务管理器）

你会发现内存爬升，然后回落下来，只涨幅高于上一次。我已经看到它爬到1 + GB的内存使用最终崩溃的标签。我尝试了setTimeout和​​的不同变化。所有这些都会导致内存泄漏。

编辑

一件事值得一提的是，这似乎只在Chrome浏览器发生。 Firefox似乎更好地处理垃圾收集。我还没有看到Firefox超过500MB。

Answer 1

所以我的铬自我更新到版本45今天早上。 45岁出生于9月。 2015年1月，这个问题似乎已经修复！我不再收到内存泄漏。此更新还固定我在这个线程有另外一个问题：

Canvas is stretching using drawImage