0

ユーザーがページにドロップした後、ファイル API を使用してキャンバスにローカル画像ファイルを描画しています。Firefox 5 と Google Chrome では正常に動作します。問題は、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>
4

1 に答える 1

0

「キャンバスに画像を描いた後」

私はキャンバスの専門家ではありませんが、画像を<canvas>要素に描画している場合、技術的には画像データは引き続きWebページの一部です。

于 2011-07-06T06:41:17.150 に答える