canvas-颜色选择器 原
实现目标：在画布上嵌入一个图片，鼠标在图像上移动的时候显示鼠标所在位置颜色信息
实现方法：
（1）创建一个图片对象
（2）图片对象加载完成时，执行获取颜色信息的函数
（3）颜色信息的函数主要包括，获取鼠标所在点的位置，通过getImageData获取鼠标所在点的像素对象，并最终获得rgba信息
（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>注意：
（1）图片的路径不能跨域，否则getImageData不执行，会报错显示Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
（2）要发布后才能正常显示
(adsbygoogle = window.adsbygoogle || []).push({});
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读