html5实现简单的颜色拾取

最新推荐文章于 2025-02-13 15:57:13 发布

lyf08600231

最新推荐文章于 2025-02-13 15:57:13 发布

阅读量3k

点赞数

分类专栏： canvas

本文链接：https://blog.youkuaiyun.com/lyf08600231/article/details/8824211

版权

canvas 专栏收录该内容

2 篇文章

订阅专栏

该博客介绍了如何使用HTML5实现简单的颜色拾取功能，强调了必须在web服务器或本地开发环境中运行以避免图像访问权限限制，并且提到了示例中使用了jQuery框架。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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