html5实现简单的颜色拾取

来源：互联网发布：psd字体源码编辑：程序博客网时间：2024/06/18 06:23

注意，只有将例子传上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);})}