2012-12-13 50 views
0

我想知道是否有一種方法可以在您不再需要時釋放畫布及其圖像數據?爲圖像數據創建畫布然後清除它?

的這裏展示的是我做的一個例子:

img = new Image(); 
img.src = "test.png"; 
img.onload = function() { 
    var c = document.createElement('canvas'), d, img = this; 
    if(c.getContext) { 
    c.width = img.width; 
    c.height = img.height; 
    c = c.getContext("2d"); 
    c.drawImage(img,0,0); 
    d = c.getImageData(0,0,img.width,img.height); 
    img.getPixel = function(x,y) { 
     return d.slice((y*img.width+x)*4,4); 
    }; 
    } 
    else { 
    // canvas not supported, fall back 
    img.getPixel = function(x,y) {return [0,0,0,0];} 
    } 
}; 

一旦我得到了我想要刪除當前加載爲了畫布和imageData來釋放一些內存..結果是有一個簡單的方法來刪除臨時畫布?

回答

1

更新

所以,這其實是我需要更徹底地調查了我自己的一個個人項目,所以我做了一些測試。

它似乎(至少在Chrome中)如果你只是創建畫布和獲取數據的URL,但實際上並沒有將它設置爲一個圖像元素,你會很好,它會垃圾收集。這意味着你的例子應該自己收集垃圾。

這是當你得到一個數據URL並將它分配給一個Image元素時,事情變成梨形(很可能是由於瀏覽器如何處理圖像)。


一旦對該畫布的所有引用都消失了,它自然會自行收集垃圾。所以,只要確保在沒有關閉的範圍內引用它就沒有任何變量。

它看起來像你在做什麼,畫布應該消失。

...或者至少它應該如何工作。

實際上,它看起來像大多數瀏覽器不會從內存中釋放這些內容,直到整個頁面被卸載,這是有問題的(至少跟蹤Firefox和Chrome的這個問題似乎很少)。與此同時,處理它的最有效方法是將畫布設置爲全局(或者更好,然後將它放在某種漂亮的管理器中),然後您可以重新使用相同的畫布並結束。不理想,但它至少可以做到這一點,因爲你不會使用相當多的內存。