4

携帯電話で画像のアップロード Web ページを作成しようとしていますが、画像が大きすぎると常にメモリ不足になり、ブラウザが終了します。ここに私のコードがあります:

<input type="file" id="testFile" />
<img src="" style="position:relative;" id="uploadingImg" />

function setImage() {
    var fileList   = this.files;
    var imageType  = /image/;
    for(var i = 0;i < fileList.length;i++) {
        document.getElementById('uploadingImg').file = fileList[i];
        var reader = new FileReader();
        reader.onload = function(e) {
            document.getElementById('uploadingImg').src = e.target.result;
        }
        reader.readAsDataURL(fileList[i]);
    }
}



document.getElementById('testFile').addEventListener('change', setImage, false);

<img>or<canvas>要素を使用して 1 つの画像をプレビューする方法を知っている人はいますか? となるとメモリ不足になる"readAsDataURL"ので使わないでください。document.getElementById('uploadingImg').src = e.target.result;base64 Url はメモリを占有しすぎて、メモリ内に 3 つまたは 4 つのコピーが多数存在するためです。

キャンバスで使用"readAsArrayBuffer"および使用するにはどうすればよいですか? "drawImage"または他の方法？

を使用せずにローカル ディスクで 1 つの画像をプレビューできれば、すべて問題ありません"readAsDataUrl"。

ありがとう！

4

1 に答える 1

5

ほとんどのブラウザーでは、これを使用する必要はありませんFileReader(したがって、も必要ありませんreadAsDataUrl)。createObjectURL代わりに、File API のメソッドを使用できます。setImage()書き直された関数は次のとおりです。

function setImage() {
    var file = this.files[0];
    var URL = window.URL || window.webkitURL;
    if (URL.createObjectURL && (file.type == "image/jpeg" || file.type == "image/png" || file.type == "image/gif")) {
        document.getElementById('uploadingImg').src = URL.createObjectURL(file);
    } else {
        alert('Unable to show preview');
    }
}

ただし、ブラウザのサポートはまだ少し不安定なので、使用するかどうかを決定する前に、caniuse.com などのサポート テーブルを確認してください: http://caniuse.com/#search=createobjectURL

于 2012-10-30T06:41:59.760 に答える