1

我想知道一旦您不再需要画布及其图像数据，是否有办法释放它？

我正在做的一个例子如下所示：

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 以释放一些内存.. 有没有一种简单的方法来删除临时画布？

4

1 回答 1

2

更新

所以，这实际上是我需要为我自己的个人项目更彻底地调查的东西，所以我做了一些测试。

看起来（至少在 Chrome 中）如果您只是创建画布并获取数据 URL，但实际上并未将其设置为 Image 元素，那么您很好，它会进行垃圾收集。这意味着您的示例应该自行收集垃圾。

当事情变成梨形时（很可能是由于浏览器处理图像的方式），当您获取数据 URL 并将其分配给 Image 元素时。

一旦对该画布的所有引用都消失了，它自然会自行收集垃圾。因此，只需确保在未关闭的范围内没有任何变量引用它。

看起来你正在做什么，画布应该消失。

...或者至少它应该是这样工作的。

实际上，看起来大多数浏览器在整个页面被卸载之前不会从内存中释放它们，这是有问题的（至少对于 Firefox 和 Chrome 来说，似乎有不少人在跟踪这个问题）。

同时，处理它的最相关的方法是使画布成为全局的（或者更好的是，将它藏在某种漂亮的管理器中），这样您就可以一遍又一遍地重用同一个画布。不理想，但它至少可以解决问题，因为您不会使用那么多内存。

于 2012-12-13T02:34:59.720 回答