html5 Canvas getImageData颜色选择器-CFANZ编程社区

原理

先用drawImage把图片画在canvas上

给canvas绑定mousemove监听函数，在函数内部计算鼠标当前的坐标，取该像素的颜色值

把该颜色值拼接成字符串显示出来，供复制

效果图

html5 Canvas getImageData颜色选择器_html

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas-getImageData颜色拾取器</title>
  <style>
   .square{
    width:20px;
    height:20px;
    display:block;
    background-color:gray;
   }
   .canvas{
    margin:10 auto;
   }
   .show{
    margin:0 auto;
    width:300px;
   }

  </style>
</head>
<body>
 <canvas class='canvas' id="myCanvas"></canvas>
 <div class='show'>
 <span class='square'></span><span id='colorValue'></span>
  <input id='value' type='text' />
 </div>

<script type="text/javascript">
 var canvas = document.getElementById('myCanvas');
 var ctx = canvas.getContext('2d');

let monkeyKing = new Image();
monkeyKing.src='monkeyKing.png';
//console.dir(monkeyKing);
// 图片加载成功后再绘制 否则drawImage会失败
monkeyKing.onload=function(){
 canvas.width = monkeyKing.width;
 canvas.height=monkeyKing.height;
   ctx.drawImage(monkeyKing,0,0,monkeyKing.width,monkeyKing.height);
   // 获取所有像素信息 这个数据太大了，性能不好，我们可以根据鼠标的坐标，获取某个像素的值即可
  //let imageData = ctx.getImageData(0,0,monkeyKing.width,monkeyKing.height);
  //console.dir(imageData);
}
// 拾取
function pick(e){
 let px = ctx.getImageData(e.layerX,e.layerY,1,1).data;
 let rgbaStr = 'rgba('+px[0]+','+px[1]+','+px[2]+','+px[3]+')';
 document.querySelector('.square').style.backgroundColor=rgbaStr;
 document.querySelector('#colorValue').innerText=rgbaStr;
}
function fix(e){
 let px = ctx.getImageData(e.layerX,e.layerY,1,1).data;
 let rgbaStr = 'rgba('+px[0]+','+px[1]+','+px[2]+','+px[3]+')';
 document.getElementById('value').value=rgbaStr;
}
canvas.addEventListener('mousemove', pick);
canvas.addEventListener('click', fix);
</script>
</body>  
</html>