Question

我正在使用File API在用户将其放在页面上后在画布上绘制本地图像文件。它在Firefox 5和谷歌浏览器中运行良好。问题是在我丢弃500 Mb图像文件后，浏览器内存消耗增加约500 Mb。但我认为不应该这样，因为在画布上绘制图像后，没有更多文件链接。示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        html, body { margin: 0; padding: 0; border: 0 none; height: 100%; }
        #container { width: 100%; min-height: 100%; }
    </style>
</head>
<body>
    <div id="container">
    </div>
    <script type="text/javascript">

        var el = document.getElementById('container');
        var files = [];
        var image = new Image;
        var URL_ = window.URL || window.webkitURL;

        image.addEventListener('load', function (e) {

            // Free link to the file
            URL_.revokeObjectURL(image.src);

            // Draw image
            var canvas = document.createElement('canvas');
            canvas.width = 100;
            canvas.height = 100;
            canvas.getContext('2d').drawImage(image, 0, 0, 100, 100);

            el.appendChild(canvas);

            // Process next
            generatePreview();
        }, false);

        el.addEventListener('dragenter', function (e) {
            e.preventDefault();
        }, false);

        el.addEventListener('dragover', function (e) {
            e.preventDefault();
        }, false);

        el.addEventListener('drop', function (e) {
            e.preventDefault();
            files = Array.prototype.slice.call(e.dataTransfer.files, 0);

            generatePreview();
        }, false);

        function generatePreview() {
            if (files.length == 0) return;
            image.src = URL_.createObjectURL(files.shift());
        }

    </script>
</body>
</html>

Answer 1

我在画布上画画后
'

我不是画布专家，但如果您将图像绘制到＆lt; canvas＆gt;元素，从技术上讲，图像数据仍然是网页的一部分。

浏览器是否始终将图像文件保存在内存中？

1 个答案: