將img.src設置爲dataUrl泄漏內存

下面我創建了一個簡單的測試用例，它顯示當img標記的src被設置爲不同的dataUrls時，它會泄漏內存。看起來像src更改爲其他內容後，圖像數據永遠不會被卸載。將img.src設置爲dataUrl泄漏內存

<!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。有什麼我可以做，以防止這種內存泄漏？

來源

2013-10-10 Paul Milham

這是什麼瀏覽器？你可以檢查是否存在問題。 GC由瀏覽器內部處理，因此唯一可以重寫的邏輯是。 – K3N

這發生在Chrome和Firefox上，所以我假設它是根據規範或其他。 –

他們修正了這個錯誤嗎？ – BrightIntelDusk

我最終爲這個問題做了一個解決。內存膨脹只發生在image.src改變時，所以我只是繞過了Image對象。我通過獲取dataUrl，將其轉換爲二進制（https://gist.github.com/borismus/1032746）然後使用jpg.js（https://github.com/notmasteryet/jpgjs）解析它。然後使用jpg.js，我可以將圖像複製回我的畫布，所以Image元素完全被刪除，因此不需要設置它的src屬性。

來源

2013-10-11 14:48:48

你有什麼樣的代碼可以指導我嗎？我試圖按照你所描述的來實現，而且顯然不能很好地使用jpg.js. – JayhawksFan93

@ JayhawksFan93看看[https://github.com/notmasteryet/jpgjs/blob/master/example.html](https://github.com/notmasteryet/jpgjs/blob/master/example.html）。如果圖像爲JPEG格式，則只需在交換機的_jpeg_部分使用'decodeImage'方法。 – Osi

我正在經歷類似的事情。我在'canvas'上重複使用'drawImage'來顯示視頻。我注意到記憶開始馬上爬升。我注意到你的OP中有'canvas'標籤。將這個工作在畫布上還是僅僅在實際元素？ – Ronnie

我也遇到過這個問題，我確信這是一個瀏覽器錯誤。我發現FF和Chrome也是如此。至少Chrome曾經有一個類似的bug被修正了。我認爲它沒有消失或沒有完全消失。當我將img.src重複設置爲唯一的圖像時，我看到內存不斷增加。我已經提交了一個鉻的錯誤，如果你想把一些重量在:) https://code.google.com/p/chromium/issues/detail?id=309543&thanks=309543&ts=1382344039 （錯誤觸發的例子並不一定會產生一個新的獨特的形象，但至少它的確很有可能）

來源

2013-10-21 12:06:15 distributed

爲此問題加星標。謝謝！另外請注意，我可以使用javascript解決bug，但這並不理想，因爲它比讓瀏覽器處理它要花費更多的CPU。 –

很酷，謝謝。我記下你的解決方案。這很好，很有創意:)今天這些解決方法是可能的，這很酷，但仍然是一個恥辱，我們可以在像顯示圖像一樣簡單的事情上失敗。 – distributed

將img.src設置爲dataUrl泄漏內存

回答

相關問題