11

ここに私のサンプルコードがあります:

var input = document.createElement('input');
input.type = 'file';
document.body.appendChild(input);

input.addEventListener('change', function(){
    var file = input.files[0];

    var reader = new FileReader();
    reader.onload = function(e){
        var image = new Image();
        image.src = e.target.result;
    };
    reader.readAsDataURL(file);
});

ページを読み込み、大きな画像を選択します (私は 2.9MB 4288x3216 の画像を使用しています)。ページを更新して、同じ画像を選択します。結果?タブがクラッシュ!(ああ、スナップ!)

私の推測では、これは Chrome の File API の実装に伴うバグであると思われますが、誰かがそれを確認し、回避策を提供してくれれば幸いです。サーバーにアクセスして生成する必要なく、写真のサムネイルを表示できるようにしたいと考えています (Chrome と FF だけの場合でも)。

また、上記のサンプル コードでは、写真を選択するとすぐに、タブが約 32 MB のメモリを使用し始めます。それは予想通りだと思いますが、私が懸念しているのは、ガベージコレクターによってメモリが解放されないように見えることです。したがって、より多くの写真を選択し続けると、より多くのメモリを消費し続けます。これがクラッシュの問題に関連しているかどうかはわかりませんが、間違いなく懸念事項です。

助けてくれてありがとう!

4

1 に答える 1