在尝试复合操作和在画布上绘制图像后,我现在正在尝试删除图像和合成.我该怎么做呢？

我需要清除画布以重绘其他图像; 这可以持续一段时间所以我不认为每次绘制一个新的矩形将是最有效的选择.

我有一个网页,可以快速从服务器流式传输JSON并显示其中的一些内容,大约10次/秒.一部分是base64编码的PNG图像.我发现了几种不同的显示图像的方法,但是所有这些方法都会导致无限的内存使用.它在几分钟内从50mb上升到2gb.适用于Chrome,Safari和Firefox.没试过IE.

我首先通过查看Activity Monitor.app发现了内存使用情况 - Google Chrome渲染器进程不断地占用内存.然后,我看着Chrome的资源检查器(View> Developer> Developer Tools,Resources),我看到它被缓存的图像.每次我更改img src,或创建一个新的Image()并设置它src,Chrome缓存它.我只能想象其他浏览器也在做同样的事情.

有没有办法控制这个缓存？我可以把它关掉,或做鬼鬼祟祟的事情,这样就不会发生吗？

编辑:我希望能够在Safari/Mobile Safari中使用该技术.此外,如果有人有任何想法,我会对其他快速刷新图像的方法持开放态度.

这是我尝试过的方法.每个驻留在一个在AJAX完成时调用的函数.

方法1 - 直接src在img标记上设置属性

快速.显示得很好.泄漏就像疯了似的.

$('#placeholder_img').attr('src', 'data:image/png;base64,' + imgString);

方法2 - img用a 替换canvas,并使用drawImage

显示正常,但仍然泄漏.

var canvas = document.getElementById("placeholder_canvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.onload = function() {
    ctx.drawImage(img, 0, 0); 
}   
img.src = "data:image/png;base64," + imgString;

方法3 - 转换为二进制并替换canvas内容

我在这里做错了 - …