更新

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];}
  }
};

一旦我得到了结果，我想删除当前加载的canvas和imageData以释放一些内存..是否有一种简单的方法来删除临时画布？

Answer 1

更新

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

看来（至少在Chrome中）如果您只是创建画布并获取数据网址，而不是实际将其设置为图像元素，那么您就可以了，它会被垃圾收集。这意味着您的示例应该自行收集垃圾。

当你获得一个数据URL并将其分配给一个Image元素时，就会形成梨形（很可能是由于浏览器处理图像的方式）。

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

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

......或者至少它应该如何运作。

实际上，看起来大多数浏览器都没有从内存中释放这些内容，直到整个页面被卸载这是有问题的（至少在Firefox和Chrome上似乎有很多跟踪此问题）。

与此同时，处理它的最相关的方法是使画布成为一个全局（或更好，然后将它放在某种好的管理器中），这样你就可以重复使用相同的画布了。过度。不理想，但它至少会成功，因为你不会使用相当多的内存。

为图像数据创建画布然后清除它？

1 个答案:

更新