我之前在网上看过一个插件叫做出JScolor 颜色拾取器 说白了就是通过1*1PX的DOM设置颜色值通过JS来获取当前鼠标点击位置DOM的颜色值。
自从HTML5 画布出来之后。就有更好的方法来获取了，比如郭阿里巴巴ICON矢量库用的SVG和渐变来进行绘制:
我昨天用Canvas来绘制了一下，因为Canvas有现成的方法getImageData(x,y,width,height);这个方法返回一个属性data数组,也就是CanvasPixelArray
1个像素分别有四个值rgba(红,绿,蓝，阿尔法值); 1个像素就有这4个值，意味着CanvasPixelArray里面每个像素值就占了个位置简称4X(下同)。
CanvasPixelArray的排序要简单，从左上角到右下角。长度也简单4X。比如说width*height*4.比如：3*3像素CanvasPixelArray有多少个值。3*3*4=36值。
有一点说明一下，关系到我们下面说的:像素值是从1开始。但是数组的索引值是从0开始的，所以我们刚刚说的3*3像素CanvasPixelArray长度是36位。。
但是第3*3像素它的颜色值 是[....,32,33,34,35]。索引值 需要减去4开始。道理就是像素开始的坐标是1*1.但是数组是0。
第3*3像素位置的下标开始Star和结束end我们可以脑袋想想就出来。但是如果第542*245像素的值我们怎么算。当然了，如果你是天才脑袋的话。我下面的
算法可以无视：
以下算法的借鉴来自于程序出版之家：图灵程序设置的《HTML5 Canvas教程》。
像素值:rgba在CanvasPixelArray里面的排序也是红(r),跟着是绿(g),蓝(b),阿尔法(a);根据这个规律，我也只要得到红(r),然后再以此+1,+2,+3（来获取剩下的值）
而恰好红(r)是目标像素再CanvasPixelArray的stat位置。也就是我们要获取开始的位置，剩下的就OK了。
比如是我们要获取上面542*245的值。
[html]view plaincopy
varwidth=imagedates.width;
varx=542;
vary=245;
varr=(y-1)*(width*4)+(x*4)-4);
y-1上面说过了。数组的下标是0开始的。width*4获取了1行在CanvasPixelArray有多少个像素值.*(y-1)得到了在y行第一列的像素值开始下标。下面是列了542了
(x*4)-4得到了到了距离第一列之前有多少位像素值的长度。然后相加。就到了目标像素的其实位置 红色(r)
红色出来了。其他的就更加简单了。s
g=r+1;
b=r+2;
a=r+3;
/*************算法很简单。关键是要重新划分鼠标下标以及像素开始的坐标**********/
通过上面的我们就可以做一个颜色拾取器了：
[html]view plaincopy
(function(){
varc=document.getElementById("MyCanvas"),
ctx=c.getContext("2d"),
image=newImage();
image.src="1.png";
image.onload=function(){
ctx.drawImage(this,0,0);
}
c.onclick=function(e){
varx=e.clientX,y=e.clientY,x1=this.offsetLeft,y1=this.offsetTop,nowx=x-x1,nowy=y-y1;
varimagedates=ctx.getImageData(nowx,nowy,1,1);
varpixel=imagedates.data;
document.getElementById("color").style["background-color"]="rgb("+pixel[0]+","+pixel[1]+","+pixel[2]+")";
}
})()
有一点需要注意的是image.src需要和文件同源。这样才能有效执行下面的代码，不然会报错的。此外以上代码需要在服务器环境运行。本地测试data会返回[0,0,0,0];
来源http://blog.csdn.net/u011551941/article/details/46762245
