HTML5Canvas获取网页的像素值。

我之前在网上看过一个插件叫做出JScolor   颜色拾取器  说白了就是通过1*1PX的DOM设置颜色值通过JS来获取当前鼠标点击位置DOM的颜色值。

自从HTML5 画布出来之后。就有更好的方法来获取了，比如郭阿里巴巴ICON矢量库 用的SVG和渐变来进行绘制:

image.Onload=function(){
ctx.drawImage(this,0,0);
}
c.Onclick=function(e){
var x=e.clientX,y=e.clientY,x1=this.offsetLeft,y1=this.offsetTop,nowx=x-x1,nowy=y-y1;
var imagedates=ctx.getImageData(nowx,nowy,1,1);
var pixel=imagedates.data;
document.getElementById("color").style["background-color"]="rgb("+pixel[0]+","+pixel[1]+","+pixel[2]+")";
}
})()有一点需要注意的是image.src需要和文件同源。这样才能有效执行下面的代码，不然会报错的。此外以上代码需要在服务器环境运行。本地测试data会返回[0,0,0,0];