3

ローカル ドライブから多数の画像のサムネイルを表示するための作業を行っています。

HTML5 File API を使用することはかなり可能ですが、大量の画像を読み込もうとすると、ブラウザーのメモリ使用量が上限を超えて崩壊します。

問題は、ファイルの読み取り後に FileReader がメモリを解放しないことだと思います。

もともと、FileReader の新しいインスタンスと、画像を反復処理する単純なループがありました。

このメモリの問題を解決するために、これを置き換えて FileReader を 1 つだけにしましたが、実際には役に立ちませんでした。

関連するコードブロックは次のとおりです。

<script>

var areader = new FileReader();
var counter=0;

function loadImage(file) {
    var canvas = document.createElement("canvas");
    areader.onload = function (event) {
        var img = new Image;

        img.onload = function () {
            canvas.width = img.width / 100;
            canvas.height = img.height / 100;
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0, img.width / 100, img.height / 100);
            var browse = document.getElementById("uploadInput");
            if (browse.files.length > counter) {
                counter++;
                areader.result = null;//I don't think this makes any difference
                loadImage(browse.files[counter]);
            }
        };

        img.src = event.target.result;
    };
    areader.readAsDataURL(file);
    preview.appendChild(canvas);
}

function showImages() {
    loadImage(document.getElementById("uploadInput").files[0]);

}

誰かがこの問題に遭遇した場合、私は非常に愚かなことをします.

ありがとう、

タマス

4

1 に答える 1

10

これはファイル リーダーではありませんが、イメージのプロパティとして base64 のイメージ全体のデータを使用しているため、src実際にはイメージのサイズの 133% がメモリ内で使用されます。

代わりにBlob URLを使用する必要があります。

var URL = window.URL || window.webkitURL;

function loadImage( file ) {
    var canvas = document.createElement("canvas"),
        img = new Image();

    img.onload = function() {
        canvas.width = img.width / 100;
        canvas.height = img.height / 100;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, img.width / 100, img.height / 100);
        URL.revokeObjectURL( img.src );
        img = null;

        var browse = document.getElementById("uploadInput");
            if (browse.files.length > counter) {
            counter++;
            loadImage(browse.files[counter]);
        }
    };
    img.src = URL.createObjectURL( file );

    preview.appendChild(canvas);
}
于 2012-11-18T17:33:47.083 に答える