1

我正在尝试使用 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 中的一个错误吗？难道我做错了什么？有什么解决方法吗？

非常感谢您的帮助！

4

2 回答 2

0

当我绘制多个图像时，我注意到图像以某种方式在画布中相互堆叠。也许它会帮助清理画布，然后再次抽空：

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/

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

于 2012-06-01T16:23:49.233 回答
0

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

p.parentNode.replaceChild(canvas, p);

所以我改用jQuery函数replaceWith()，旋转几张图片后内存停止堆积：

$(p).replaceWith(canvas);

查看 replaceWith 函数，它实际上移除了对象（可能最终使用了 removeChild 和 appendChild）并将新对象附加到 DOM。我的猜测是浏览器实现 replaceChild() 的方式有所不同。

于 2012-12-12T16:51:56.577 回答