<input>、<img>、キャンバスを使用して大きな画像をプレビューする方法

Question

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

<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>または<canvas>要素を使用して、1枚の画像をプレビューする方法を知っていますか？ document.getElementById('uploadingImg').src = e.target.result; になると、メモリが足りなくなるので、"readAsDataURL"を使用しないでください。 base64 URLはあまりにも多くのメモリを占有しており、3つまたは4つのコピーが多いメモリに存在します。

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

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

ありがとうございます！

Answer 1

ほとんどのブラウザでは、FileReader（したがってreadAsDataUrl）を使用する必要はありません。代わりに、File APIのcreateObjectURLメソッドを使用できます。ここにあなたの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