HTML5 Canvas 獲取網頁的像素值。
我之前在網上看過一個插件叫做出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的值。
var width=imagedates.width; var x=542; var y=245; var r=(y-1)*(width*4)+(x*4)-4);
(x*4)-4得到了到了距離第一列之前有多少位像素值的長度。然後相加。就到了目標像素的事實上位置 紅色(r)
紅色出來了。其它的就更加簡單了。s
g=r+1;
b=r+2;
a=r+3;
/*************算法非常easy。關鍵是要又一次劃分鼠標下標以及像素開始的坐標**********/
通過上面的我們就能夠做一個顏色拾取器了:
(function(){ var c=document.getElementById("MyCanvas"), ctx=c.getContext("2d"), image=new Image(); image.src="1.png"; 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須要和文件同源。這樣才幹有效執行以下的代碼。不然會報錯的。此外以上代碼須要在server環境執行。本地測試data會返回[0,0,0,0];
HTML5 Canvas 獲取網頁的像素值。