Javascript 获取本地映像'；s高度、宽度和所有像素'；s rgb

我找到了以下代码，让用户从计算机加载图像。

功能手柄文件选择（evt）{
var files=evt.target.files
for（var i=0，f；f=files[i]；i++）{
var reader=new FileReader（）
reader.onload=（函数（文件）{
返回函数（e）{
var span=document.createElement（'span'）
span.innerHTML=[''）.join（''）
document.getElementById（'list'）.insertBefore（span，null）
}
})（f）
reader.readAsDataURL（f）
}
}
document.getElementById（'files'）。addEventListener（'change'，handleFileSelect，false）

现在，我真正想要的不是显示图像，而是读取图像的大小（高度和宽度）以及每个像素的rgb（红、绿、蓝）值

e.target.result

=转换为base 64的图像链接

---

我怎样才能，

alert（）

所选图像的高度、宽度以及像素1,1的红、绿、蓝？

我希望这对您有用

功能手柄文件选择（evt）{
var files=evt.target.files
for（var i=0，f；f=files[i]；i++）{
var reader=new FileReader（）
reader.onload=（函数（文件）{
返回函数（e）{
//var span=document.createElement（'span'）
//span.innerHTML=[''
//]加入（“”）
//document.getElementById（'list'）.insertBefore（span，null）
getInfo（例如target.result）
}
})（f）
reader.readAsDataURL（f）
}
}
document.getElementById（'files'）。addEventListener（'change'，handleFileSelect，false）
函数getInfo（pic）{
var ctxt=canvas.getContext（'2d'）；
var img=新图像；
img.src=pic；
img.onload=函数（）{
ctxt.drawImage（img，0，0）；
var data=ctxt.getImageData（0,0，img.width，img.height）；
var red=数据[0]，
绿色=数据[1]，
蓝色=数据[2]；
警报（“高度为“+img.height+”像素点，宽度为“+img.width+”像素点，像素点（1,1）”的r:“+red+”，g:“+green+”，b:“+blue”）；
}
}

---

@Isv完美无瑕！它按照我的预期工作，我只需要更改行

var data=ctxt.getImageData（0，0，img.width，img.height）中的零

更改像素。我注意到.jpg类型图像的结果可能与使用paint打开图像并检查像素的rgb时略有不同，但随后我将图像保存为.png，rgb得到的结果完全相同。我也只需要.png，所以即使是一个也没问题。

<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)