javascript - 获取本地镜像的高度、宽度和所有像素的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 = 转换为 Base 64 的图像的链接。

我如何alert()所选图像的高度、宽度以及像素 1,1 的红色、绿色和蓝色？

Answer 1

希望这对您有用。

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)
			getInfo(e.target.result)
					}
		})(f)
		reader.readAsDataURL(f)
	}
}
document.getElementById('files').addEventListener('change', handleFileSelect, false)

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

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