mac OSX Chrome浏览器中HTML5 Canvas getImageData的javascript内存泄漏_Javascript_Google Chrome_Memory Leaks_Html5 Canvas_Getimagedata

mac OSX Chrome浏览器中HTML5 Canvas getImageData的javascript内存泄漏

javascript google-chrome memory-leaks html5-canvas

mac OSX Chrome浏览器中HTML5 Canvas getImageData的javascript内存泄漏,javascript,google-chrome,memory-leaks,html5-canvas,getimagedata,Javascript,Google Chrome,Memory Leaks,Html5 Canvas,Getimagedata,新chrome版本（版本35.0.1916.114）修复了此问题在chrome中，对于mac osx，CanvasRenderingContext2D#getImageData函数将导致内存泄漏，如何避免此问题，这是测试用例和结果，它只发生在chrome浏览器中，safari可以 <!DOCTYPE html> <html> <head> <title>CanvasRenderingContext2D#getImageData bug

新chrome版本（版本35.0.1916.114）修复了此问题

在chrome中，对于mac osx，CanvasRenderingContext2D#getImageData函数将导致内存泄漏，如何避免此问题，这是测试用例和结果，它只发生在chrome浏览器中，safari可以

<!DOCTYPE html>
<html>
<head>
    <title>CanvasRenderingContext2D#getImageData bug in chrome</title>
    <script type="text/javascript">

    var g;
    function init(){
        g = document.getElementById('canvas').getContext('2d');
        g.fillStyle = "blue";
        g.fillRect(10, 10, 100, 100);
        g.fillStyle = "green";
        g.fillRect(60, 60, 100, 100);
    }

    function getImageData(){
        var i = 0;
        while(i++ < 100){
        var c = g.getImageData(0,0,1000, 1000);
        delete c;
        }
    }

    function toDataURL(){
        var i = 0;
        while(i++ < 100){
        var c = g.canvas.toDataURL();
        delete c;
        }
    }
    </script>
</head>
<body onload="init()">
<button onclick="getImageData()">call getImageData 100 times - then memory will grow, can't GC</button>
<button onclick="toDataURL()">call toDataURL 100 times - it is OK</button><br>
<canvas id='canvas' width='600px' height='500px'/>
</body>
</html>


浏览器中的CanvasRenderingContext2D#getImageData错误
var g；
函数init（）{
g=document.getElementById（'canvas'）.getContext（'2d'）；
g、 fillStyle=“蓝色”；
g、 fillRect（10,10,100,100）；
g、 fillStyle=“绿色”；
g、 fillRect（60,60,100,100）；
}
函数getImageData（）{
var i=0；
而（i++<100）{
var c=g.getImageData（0,01000,1000）；
删除c；
}
}
函数toDataURL（）{
var i=0；
而（i++<100）{
var c=g.canvas.toDataURL（）；
删除c；
}
}
调用getImageData 100次-然后内存将增长，GC不能吗
调用toDataURL 100次-一切正常

您的问题不在于

getImageData

函数。保存

getImageData

的变量的赋值方式导致了泄漏

问题是

delete c

将失败（delete不影响变量名），浏览器会自动返回false

请改用

c=null

。尝试在

for

循环之外声明

变量，以避免在循环的每个步骤中重新创建变量

以下是修改后的代码：

function getImageData(){
    var i = 0;
    var c;
    while(i++ < 100){
        c = g.getImageData(0,0,1000, 1000);
        // c = null; // <= check UPDATE to see why this doesn't work as expected
    }   
}

function toDataURL(){
    var i = 0;
    var c;
    while(i++ < 100){
        c = g.canvas.toDataURL();
        // c = null; // <= check UPDATE to see why this doesn't work as expected
    }   
}

此外，宽度/高度越大，内存泄漏越大。调用

g.getImageData（0,0100009000）27.0.1453.94

，code>两次将使Windows 7 SP1上的线程崩溃。谢谢你，但它似乎没用，你曾经测试过吗？chromeI在Chrome 27.0.1453.93、27.0.1453.94和29.0.1518.3 canary中测试的版本是什么。我没有因为那个密码而泄露内存。内存在while循环期间增长，并在函数结束后由垃圾收集器清除。看来你面临的真正问题不是内存泄漏，而是内存溢出！！！我认为垃圾收集器在函数结束之前不会被触发。因此，在浏览器有机会触发垃圾收集器之前，使用巨大的画布或巨大的循环迭代会使内存溢出。我在windows xp中测试了它，没关系，也许这只发生在chrome中一段时间mac@samsha: . 你有没有试着像我说的那样拨打电话，或者使用类似的设置间隔来进行操作，但还是卡住了？（我无法在osx上测试）如果是这样，请尝试在Chromium项目网站上报告该漏洞，如果您得到了答案，请在这里为我们发布！；）新chrome版本（版本35.0.1916.114）修复了此问题
<!DOCTYPE html>
<html>
<head>
<title>CanvasRenderingContext2D#getImageData bug fixed</title>
<script type="text/javascript">

var g;
function init(){
    g = document.getElementById('canvas').getContext('2d');
    g.fillStyle = "blue";
    g.fillRect(10, 10, 100, 100);
    g.fillStyle = "green";
    g.fillRect(60, 60, 100, 100);
}

function getImageData(){        
    var c = g.getImageData(0,0,1000, 1000);     
}

var total = 0;
var iterations = 100;

function test(){
    var i = 0;

    while(i++ < iterations){
        setTimeout(function(){          
            getImageData();
            total++;
            //console.log(total);
            if(total == iterations){
                alert("" + total+" getImageData functions were completed!!!")
            }
        }, 0.01); // defer
    }
    alert("" + (i-1) + " iterations completed. Wait for the return of all getImageData");
}
</script>
</head>
<body onload="init()">
<button onclick="test()">call getImageData several times</button><br>
<canvas id='canvas' width='600px' height='500px'/>
</body>
</html>