注意，只有將例子傳上web服務器或者本地開發環境才能看見效果。因爲圖像和控制畫布不在同一個位置，畫布對於這個圖像的訪問將會受到嚴格的限制。
本例子使用了jquery框架
getColor函數可以傳1-6個參數
html:
<!DOCTYPE html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>顏色拾取</title>
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/getColor.js"></script>
<script type="text/javascript" >
$(document).ready(function(){
var canvas=$("#myCanvas");
//getColor(canvas);
//getColor(canvas,"img/example.jpg",200);
getColor(canvas,"img/example.jpg",0,30,200,200);
});
</script>
<link type="text/css" rel="stylesheet" href="css/test.css">
</head>
<body>
<canvas id="myCanvas" ></canvas>
</body>
</html>css:
@charset "utf-8";
/* CSS Document */
*{margin:0;
padding:0;
}
html,body{height:100%;
width:100%;
}
canvas{display:block;
}js:
// JavaScript Document
/*創建顏色拾取器
mycanvas 畫布id;
imgx,imgy 指定圖像在畫布上的位置；
imgs 圖像
imgwidth,imgheight 圖像大小
*/
function getColor(){
var canvas=arguments[0];
var ctx=canvas.get(0).getContext("2d");
var img=new Image();
img.src=arguments[1];
var imgX=arguments[2];
var imgY=arguments[3];
var imgWidth=arguments[4];
var imgHeight=arguments[5]
//alert(arguments[4]);
if(arguments.length==1){
img.src="img/example.jpg";
$(img).load(function(){
ctx.drawImage(img,0,0);/*相對畫布的位置座標*/
});
}else if(arguments.length==2){
$(img).load(function(){
ctx.drawImage(img,0,0);/*相對畫布的位置座標*/
});
}else if(arguments.length==3){
$(img).load(function(){
ctx.drawImage(img,imgX,0);/*相對畫布的位置座標*/
});
}else if(arguments.length==4){
$(img).load(function(){
ctx.drawImage(img,imgX,imgY);/*相對畫布的位置座標*/
});
}else if(arguments.length==5){
$(img).load(function(){
ctx.drawImage(img,imgX,imgY,imgWidth,img.width);/*相對畫布的位置座標*/
});
}else if(arguments.length==6){
$(img).load(function(){
ctx.drawImage(img,imgX,imgY,imgWidth,imgHeight);/*相對畫布的位置座標*/
});
}
canvas.click(function(e){
var canvasOffset=canvas.offset();/*獲取畫布與瀏覽器窗口頂部和左邊的像素*/
var canvasX=Math.floor(e.pageX-canvasOffset.left);
var canvasY=Math.floor(e.pageY-canvasOffset.top);
var imgData=ctx.getImageData(canvasX,canvasY,1,1);
var pixel=imgData.data;/*存儲顏色的數組*/
var pixelColor="rgba("+pixel[0]+","+pixel[1]+","+pixel[2]+","+pixel[3]+")";
$("body").css("backgroundColor",pixelColor);
})
}