我创建了一个网页,通过Websocket接收base64编码的位图,然后将它们绘制到画布上.它完美地运作.除此之外,浏览器(无论是Firefox,Chrome还是Safari)的内存使用量随着每张图像而增加,并且永远不会下降.因此,我的代码中必须存在内存泄漏或其他一些错误.如果我注释掉对context.drawImage的调用,则不会发生内存泄漏(但当然不会绘制图像).以下是我网页上的摘要.任何帮助表示赞赏.谢谢!
// global variables
var canvas;
var context;
...
ws.onmessage = function(evt)
{
var received_msg = evt.data;
var display_image = new Image();
display_image.onload = function ()
{
context.drawImage(this, 0, 0);
}
display_image.src = 'data:image/bmp;base64,'+received_msg;
}
...
canvas=document.getElementById('ImageCanvas');
context=canvas.getContext('2d');
...
<canvas id="ImageCanvas" width="430" height="330"></canvas>
更新12/19/2011
我可以通过使用createElement/appendChild和removeChild每100个图像动态创建/销毁画布来解决此问题.之后,我对Firefox和Chrome没有更多内存问题.
但是,Safari仍然存在内存使用问题,但我认为这是一个与Canvas无关的问题.在Safari中反复更改图像的"src"似乎存在问题,好像它永远不会释放这个内存.
display_image.src = 'data:image/bmp;base64,'+received_msg;
这与以下网站上描述的问题相同:http://waldheinz.de/2010/06/webkit-leaks-data-uris/
更新12/21/2011
我希望通过将我收到的base64字符串转换为blob(我在此站点上找到"dataURItoBlob"函数)并返回到带有window.URL.createObjectURL的URL,将我的图像src设置为此来解决此Safari问题. URL,然后通过调用window.URL.revokeObjectURL释放内存.我得到了这一切,Chrome和Firefox正确显示图像.不幸的是,Safari似乎不支持BlobBuilder,因此它不是我可以使用的解决方案.这很奇怪,因为包括O'Reilly"Programming HTML5 Applications"在内的很多地方都说Safari/WebKit Nightly Builds支持BlobBuilder.我从http://nightly.webkit.org/下载了最新的Windows夜间版本并运行了WebKit.exe,但BlobBuilder和WebKitBlobBuilder仍未定义.
更新01/03/2012
好吧,我最后通过使用atob()解码base64编码的数据URI字符串然后创建像素数据数组并使用putImageData将其写入画布来修复此问题(请参阅http://beej.us/blog/2010/02/ html5s-canvas-part-ii-pixel-manipulation /).这样做(而不是不断修改图像的"src"并在onload函数中调用drawImage),我不再在Safari或任何浏览器中看到内存泄漏.