画布甚至 Img 吃 RAM 和 CPU答案

【问题标题】：Canvas even Img eating RAM and CPU画布甚至 Img 吃 RAM 和 CPU
【发布时间】：2012-01-02 11:50:58
【问题描述】：

我正在列出该区域中丢弃的文件。然后获取他们的 dataUrl 并将它们放入 Img 中。然后使用drawImage 将该图像放入画布中。我根据图像的大小对图像进行适当的缩放。它运作正常。但问题是即使在操作完成之后。例如在 Canvas 被附加到 dom CPU 并且内存使用率很高之后很久。只是为了显示画布需要很高的 CPU 和内存。

drop 事件中的代码：

    e.preventDefault();
    $("#controller_search").attr('value', '^')
    $("#controller_search").attr('disabled', 'disabled');
    $("#imageList").html('');
    var templateData = "\
        <div class='imageviewer-up'> \
            <div class='curtain'></div> \
            <canvas class='canvas'></canvas> \
            <div class='loading'>0%</div> \
        </div> \
        ";
    for(var i=0;i<event.dataTransfer.files.length;++i){
        var file = event.dataTransfer.files[i];
        var reader = new FileReader();
        reader.onload = (function(file){
            return function(e){
                var template = $(templateData);
                var image = new Image();/*template.find('img')[0];*/
                image.onload = (function(image){
                    return function(){
                        var size = {height: image.height, width: image.width}
                        var rSize = size;
                        if(size.height > 175)
                            rSize = {height: 175, width: (175*size.width)/size.height}
                        else{
                            rSize = {height: 175/(size.width/size.height), width: size.width/(size.width/size.height)}
                        }
                        image.height = rSize.height;
                        image.width = rSize.width;

                        var canvas = template.find('canvas')[0];
                        var context = canvas.getContext("2d");
                        context.mozImageSmoothingEnabled = true;
                        canvas.height = 175+4;
                        canvas.width = image.width+4;
                        context.drawImage(image, (canvas.height-image.height)/2, 2, image.width, image.height);

                        template.css('height', 175+4+0);
                        template.css('width', image.width+0);

                    }
                })(image)
                image.src = e.target.result;
                image.title = file.name;
                console.log(file.name);
                $("#imageList").append(template);
                image = null;
            }

        })(file);
        reader.readAsDataURL(file);
    }

目前我正在通过拖动 20 个图像（总计 45 MB）进行测试，以便创建 20 个画布。是不是太过分了？

编辑

我什至使用 IMG 代替画布进行了测试。例如仅将 IMG 与 dataUrls 一起使用。但也有这种方式。以同样的方式减速。那么我的代码中是否存在内存泄漏？

【问题讨论】：

标签： javascript memory google-chrome canvas html5-canvas

【解决方案1】：

我认为这是关于 chrome bug#36412 的问题 data: url 正在占用内存但没有释放它。这就是导致潜在问题的原因。我使用window.URL.createObjectURL 和window.URL.revokeObjectURL 修复了它。对于 webkit，它的 window.webkitURL 代替。现在即使有 30 多张图像，它也能正常工作。当前代码如下所示：

for(var i=0;i<event.dataTransfer.files.length;++i){
    var file = event.dataTransfer.files[i];
    var total = event.dataTransfer.files.length;
    var template = $(templateData);
    var image = new Image();/*template.find('img')[0];*/
    image.onload = (function(image, template, i){               
        return function(e){
            /* Size adjustment */               
            var canvas = template.find('canvas')[0];
            var context = canvas.getContext("2d");
            context.drawImage(image, (canvas.height-image.height)/2, 2, image.width, image.height);             
            window.URL.revokeObjectURL(this.src);
        }
    })(image, template, i)
    image.src = window.URL.createObjectURL(file);
    bong.upload.files.push(file);
    $("#imageList").append(template);
    image = null;
}

【讨论】：