使用getImageData和/或putImageData在canvas中發生內存泄漏

Question

我正在創建一個實時視頻編輯器，允許您使用畫布添加某些視頻效果。 您會在我的代碼中注意到，我實際上有兩個canvas元素。 過程是：

1. <video>開始使用CSS無形地播放。
2. 可見的<canvas>將視頻渲染到畫布上。
3. 為了添加實時效果，我需要另外一個隱藏的<canvas>來處理視頻圖像，然后將處理后的幀返回到可見的<canvas> 。 這是我使用getImageData()和putImageData()

我現在看到chrome中的內存泄漏。 我發現很多線程都在討論這個問題，但我找不到解決方案。

為了測試目的和小提琴，我刪除了“視頻效果”代碼。 它仍然沒有效果處理的內存泄漏。

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

使用Chromes任務管理器觀察Memory （漢堡菜單 - >更多工具 - >任務管理器）

你會注意到內存爬升然后再下降，只會比上一次上升。 我已經看到它很好地升級到1 + GB的內存使用量，最終導致選項卡崩潰。 我嘗試過setTimeout和requestAnimationFrame不同變體。 所有這些似乎都會導致內存泄漏。

編輯

值得一提的是，這似乎只發生在chrome中。 Firefox似乎更好地處理垃圾收集。 我還沒有看到firefox超過500mb。

Answer 1

所以我的Chrome今天早上自我升級到45版。 45月9日問世。 2015年1月，這個問題似乎已經解決了！ 我不再收到內存泄漏。 此更新還解決了我在此主題中遇到的另一個問題：

Canvas使用drawImage進行拉伸