ローカルイメージの高さ、幅、全ピクセルのrgbを取得する

Question

ユーザーが自分のコンピュータからイメージを読み込ませる次のコードが見つかりました。今
https://jsfiddle.net/8Lw42kcv/

<input id="files" type="file"> 
<output id="list"></output> 

function handleFileSelect(evt){ 
var files=evt.target.files 
for(var i=0,f;f=files[i];i++){ 
var reader=new FileReader() 
reader.onload=(function(theFile){ 
return function(e){ 
var span=document.createElement('span') 
span.innerHTML=['<img class="thumb"src="',e.target.result, 
'"title="',escape(theFile.name),'"/>'].join('') 
document.getElementById('list').insertBefore(span,null) 
} 
})(f) 
reader.readAsDataURL(f) 
} 
} 
document.getElementById('files').addEventListener('change',handleFileSelect,false) 

、私が本当にしたいことは、画像を表示することはありませんが、それは大きさ（高さと幅）ともすべてのピクセルのRGB（赤、緑、青のです読み取るために）値。

e.target.result =画像のリンクは64

方法I、alert()選択された画像の高さ、幅及び赤色、緑色画素1,1の青い缶を塩基に変換しましたか？

Answer 1

これはあなたにとって便利だと思います。

function handleFileSelect(evt) { 
 
\t var files = evt.target.files 
 
\t for (var i = 0, f; f = files[i]; i++) { 
 
\t \t var reader = new FileReader() 
 
\t \t reader.onload = (function(theFile) { 
 
\t \t \t return function(e) { 
 
\t \t \t // var span = document.createElement('span') 
 
\t \t \t // span.innerHTML = ['<img class="thumb"src="', e.target.result, 
 
\t \t \t // \t '"title="', escape(theFile.name), '"/>' 
 
\t \t \t // ].join('') 
 
\t \t \t // document.getElementById('list').insertBefore(span, null) 
 
\t \t \t getInfo(e.target.result) 
 
\t \t \t \t \t } 
 
\t \t })(f) 
 
\t \t reader.readAsDataURL(f) 
 
\t } 
 
} 
 
document.getElementById('files').addEventListener('change', handleFileSelect, false) 
 

 
function getInfo(pic) { 
 
\t var ctxt = canvas.getContext('2d'); 
 
\t var img = new Image; 
 
\t img.src = pic; 
 
\t img.onload = function() { 
 
\t \t ctxt.drawImage(img, 0, 0); 
 
\t \t var data = ctxt.getImageData(0, 0, img.width, img.height).data; 
 
\t \t var red = data[0], 
 
\t \t green = data[1], 
 
\t \t blue = data[2]; 
 
\t \t alert("hight is " + img.height + "px,width is " + img.width + "px,pix(1,1)'s r:"+red + ',g:' + green + ',b:' + blue); 
 
\t } 
 
}

<input id="files" type="file"> 
 
<output id="list"></output> 
 
<canvas id="canvas"></canvas>