canvas-颜色选择器

时间 2019-11-19

标签 canvas 颜色选择器繁體版

原文原文链接

实现目标：在画布上嵌入一个图片，鼠标在图像上移动的时候显示鼠标所在位置颜色信息html

实现方法：jquery

（1）建立一个图片对象canvas

（2）图片对象加载完成时，执行获取颜色信息的函数跨域

（3）颜色信息的函数主要包括，获取鼠标所在点的位置，经过getImageData获取鼠标所在点的像素对象，并最终得到rgba信息app

（4）为canvas注册 mousemove 事件函数

<body >
<canvas id="canvas" width="647" height="520" style=""></canvas>
<div id="color">鼠标浮到图片上移动显示选择的颜色</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  var img = new Image();
  img.src = 'images/rhino.jpg';
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  img.onload = function() {
    ctx.drawImage(img,0,0);
	img.style.display="none"
  };
  var color = document.getElementById("color");
  function pick(event) {
    var x = event.layerX;
	var y = event.layerY;
	var pixel = ctx.getImageData(x,y,1,1);
	var data = pixel.data;
	var rgba = 'rgba('+data[0]+','+data[1]+','+data[2]+','+data[3]/255+')';
	color.style.background = rgba;
	color.style.color = "#fff";
	color.innerText = rgba
  }
  canvas.addEventListener("mousemove",pick)

</script>
</body>

查看选择器效果code

注意：htm

（1）图片的路径不能跨域，不然getImageData不执行，会报错显示Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.对象

（2）要发布后才能正常显示事件