利用canvas获取图片像素值
利用canvas的getImageData方法可以读取画布的某位置像素值。
1.首先创建一个canvas对象，
var canvas = document.createElement(‘canvas’);
2.获取它的2d上下文。
var context = canvas.getContext(‘2d’);
3.创建一个image对象,并指定它的图片路径，设置允许跨域
var image = new Image();
image.src = ‘image/test.png’;
image.crossOrigin = ‘Anonymous’;
4.在image的onload方法中得到像素值
image.onload = function(){
//将图片按像素写入画布
context.drawImage(image,0,0,this.width,this.height);
//读取图片某位置像素信息(x,y为需要读取的像素位置)
imageData = context.getImageData(x,y,1,1).data;
}
返回值imageData是一个数组，里面存了该位置像素的rgba值
注意1：chrom浏览器的canvas无法读取网络图片,会报错误：
需要进行设置，试了网上的方法但是并没有效果。火狐浏览器是可以访问的。
注意2：canvas无法绘制8位的灰度图，只能绘制32位的图片，所以获取像素信息也只能获取32位的图片。