創建用於圖像數據的畫布，然后清除它？

Question

我想知道是否有一種方法可以在不再需要時釋放畫布及其圖像數據？

我在做什么的示例如下所示：

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以便釋放一些內存。是否有一種簡單的方法來刪除臨時畫布？

Answer 1

更新資料

因此，實際上這是我需要針對自己的個人項目進行更徹底調查的內容，因此我進行了一些測試。

看來（至少在Chrome中是這樣），如果您只是創建畫布並獲取數據URL，而沒有將其實際設置為Image元素，那很好，它將進行垃圾回收。 這意味着您的示例應該自己進行垃圾收集。

這是當您獲取數據URL並將其分配給Image元素時（呈梨形）（最可能是由於瀏覽器處理圖像的方式）。

---

一旦對該畫布的所有引用都消失了，它自然會對其自身進行垃圾回收。 因此，只需確保在沒有關閉的范圍內沒有任何引用它的變量即可。

看來您正在做什么，畫布應該消失了。

...或者至少這就是它的工作方式。

實際上，似乎大多數瀏覽器都不會在整個頁面卸載之前從內存中釋放它們，這是有問題的（至少有很多人至少跟蹤了Firefox和Chrome的此問題）。

同時，處理該問題的最相關方法是使畫布成為全局畫布（或者更好的是，將其放入某種不錯的管理器中），以便您可以反復使用同一畫布。 這並不理想，但是至少會成功，因為您將不會使用太多的內存。