我之前在網(wǎng)上看過一個插件叫做出JScolor? 顏色拾取器? 說白了就是通過1*1PX的DOM設(shè)置顏色值通過JS來獲取當(dāng)前鼠標(biāo)點擊位置DOM的顏色值车荔。
自從HTML5 畫布出來之后渡冻。就有更好的方法來獲取了，比如郭阿里巴巴ICON矢量庫用的SVG和漸變來進(jìn)行繪制:
我昨天用Canvas來繪制了一下忧便，因為Canvas有現(xiàn)成的方法getImageData(x,y,width,height);這個方法返回一個屬性data數(shù)組,也就是CanvasPixelArray
1個像素分別有四個值rgba(紅,綠,藍(lán)族吻，阿爾法值); 1個像素就有這4個值，意味著CanvasPixelArray里面每個像素值就占了個位置簡稱4X(下同)。
CanvasPixelArray的排序要簡單超歌，從左上角到右下角砍艾。長度也簡單4X。比如說width*height*4.比如：3*3像素CanvasPixelArray有多少個值巍举。3*3*4=36值脆荷。
有一點說明一下，關(guān)系到我們下面說的:像素值是從1開始懊悯。但是數(shù)組的索引值是從0開始的蜓谋，所以我們剛剛說的3*3像素CanvasPixelArray長度是36位。定枷。
但是第3*3像素它的顏色值 是[....,32,33,34,35]孤澎。索引值 需要減去4開始届氢。道理就是像素開始的坐標(biāo)是1*1.但是數(shù)組是0欠窒。
第3*3像素位置的下標(biāo)開始Star和結(jié)束end我們可以腦袋想想就出來。但是如果第542*245像素的值我們怎么算退子。當(dāng)然了岖妄，如果你是天才腦袋的話。我下面的
算法可以無視：
以下算法的借鑒來自于程序出版之家：圖靈程序設(shè)置的《HTML5 Canvas教程》寂祥。
像素值:rgba在CanvasPixelArray里面的排序也是紅(r),跟著是綠(g),藍(lán)(b),阿爾法(a);根據(jù)這個規(guī)律荐虐，我也只要得到紅(r),然后再以此+1,+2,+3（來獲取剩下的值）
而恰好紅(r)是目標(biāo)像素再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上面說過了惜犀。數(shù)組的下標(biāo)是0開始的铛碑。width*4獲取了1行在CanvasPixelArray有多少個像素值.*(y-1)得到了在y行第一列的像素值開始下標(biāo)。下面是列了542了
(x*4)-4得到了到了距離第一列之前有多少位像素值的長度虽界。然后相加汽烦。就到了目標(biāo)像素的其實位置 紅色(r)
紅色出來了。其他的就更加簡單了莉御。s
g=r+1;
b=r+2;
a=r+3;
/*************算法很簡單撇吞。關(guān)鍵是要重新劃分鼠標(biāo)下標(biāo)以及像素開始的坐標(biāo)**********/
通過上面的我們就可以做一個顏色拾取器了：
[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需要和文件同源。這樣才能有效執(zhí)行下面的代碼礁叔，不然會報錯的牍颈。此外以上代碼需要在服務(wù)器環(huán)境運行。本地測試data會返回[0,0,0,0];
來源http://blog.csdn.net/u011551941/article/details/46762245
