Question

我正在尝试使用JavaScript drawImage在Firefox中从缓冲区画布绘制到另一个;我使用相当大的画布每帧多次调用绘图。我的内存使用量在Firefox中飙升，但在Chrome中几乎没有达到峰值。我很好奇这种行为的原因，并且如果有一种解决方法可以在不再需要它们之后通过绘制的图像释放所使用的内存（我假设）。

我需要使用globalCompositeOperation ='source-in'进行渲染，这就是我使用此方法的原因。

这是基本想法：

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
//set height and width of canvas to browser window

var dummyCanvas = document.createElement('canvas');
var dummyctx = dummyCanvas.getContext('2d');
dummyCanvas.width = canvas.width;
dummyCanvas.height = canvas.height;

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    //draw some stuff on normal canvas

    dummyCtx.clearRect(0, 0, canvas.width, canvas.height);

    //draw a polygon on buffer canvas
    dummyctx.globalCompositeOperation = 'source-in';
    //draw another polygon on buffer canvas

    ctx.drawImage(dummyctx.canvas, 0, 0);

    //draw some more stuff on normal canvas
}

这个内存问题只是Firefox中的一个错误吗？难道我做错了什么？有没有解决方法？

非常感谢您的帮助！

Answer 1

我指出，当我不止一个时，图片在画布上以某种方式堆叠在一起。也许它会帮助清理te canvas，然后再次将它拉出来：

context.clearRect(0, 0, canvas.width, canvas.height);
var w = canvas.width;
canvas.width = 1;
canvas.width = w;

我从不久前我不知道的图像大小调整中获取了这个：http://boxed.hu/articles/html5-client-side-image-resize/

但是，这只是一个提示 - 所以让我知道它是如何工作的。

Answer 2

我有jquery.rotate插件的内存泄漏问题，增加了IE上的内存使用量，发现虽然绘图占用内存，但问题是原始图像被操作图像替换。显然，这些图像只是堆积在记忆中。这条线是：

p.parentNode.replaceChild(canvas, p);

所以我改为使用jQuery函数replaceWith（）并且在旋转几个图像后内存停止堆叠：

$(p).replaceWith(canvas);

查看replaceWith函数，它实际上删除了对象（可能最终使用removeChild和appendChild）并将新的一个附加到DOM。我的猜测是浏览器如何实现replaceChild（）。

drawImage（HTML5CanvasElement）Firefox内存指数增加

2 个答案: