canvas元素标签强大之处在于可以直接在HTML上进行图形操作，具有极大的应用价值。
解释
CanvasRenderingContext2D.getImageData() 返回一个 ImageData 对象，用来描述 canvas 区域隐含的像素数据，这个区域通过矩形表示，起始点为(sx, sy)、宽为sw、高为sh。
语法
ctx.getImageData(sx, sy, sw, sh);
参数
sx：将要被提取的图像数据矩形区域的左上角 x 坐标。
sy：将要被提取的图像数据矩形区域的左上角 y 坐标。
sw：将要被提取的图像数据矩形区域的宽度。
sh：将要被提取的图像数据矩形区域的高度。
返回值
一个 ImageData 对象，包含 canvas 给定的矩形图像数据。
ImageData 对象会有三个属性，height、width 和 data。
ImageData.height
使用像素描述 ImageData 的实际高度，这个值其实等于 getImageData() 方法中的参数 sh
ImageData.width
使用像素描述 ImageData 的实际宽度。这个值其实等于 getImageData() 方法中的参数 sw
ImageData.data
一个一维数组，包含以 RGBA 顺序的数据，数据使用 0 至 255（包含）的整数表示。
制作图片吸色
原理就是把图片放到 canvas 里，然后获取点击坐标、通过getImageData 取色
注意
如果高度（sh）或者宽度（sw）变量为0，则会抛出错误。
本地会把图片放到 canvas 里会报跨域，可以放到服务器上或自己起个服务，若哪位大佬有更好的方法望告知，非常感谢~
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>getcolor</title>
<style>
.container{display:flex;height:40px;width:300px;}
#color{height:40px;width:40px;}
#text{padding-left:10px;line-height:40px;}
</style>
</head>
<body style="margin: 0;">
<canvas id="canvas"></canvas>
<div class="container">
<div id="color"></div>
<div id="text"></div>
</div>
</body>
<script>
var img = new Image();
img.src ='./图片.jpeg'
var canvas = document.getElementById('canvas');
var color = document.getElementById('color');
var text = document.getElementById('text');
canvas.width=200;
canvas.height=200;
var ctx = canvas.getContext('2d');
img.onload = function() {
// 在canvas上画图片
ctx.drawImage(img, 0, 0,200,200);
};
function pick(event) {
// 获取鼠标坐标
var x = event.layerX;
var y = event.layerY;
// 获取图片像素信息
var pixel = ctx.getImageData(x, y, 1, 1);
var data = pixel.data;
// 获取rgba值
var rgba = 'rgba(' + data[0] + ',' + data[1] +',' + data[2] + ',' + (data[3] / 255) + ')';
// 设置小正方形的背景颜色
color.style.background =rgba;
// 把拼接的字符串设置为元素的文本内容
text.textContent = rgba;
}
canvas.addEventListener('click', pick);
</script>
</html>
## 结果
在这里插入图片描述
RGB 转 HEX
// rgb转HEX
function rgb2hex(rgb) {
var reg=/(\d{1,3}),(\d{1,3}),(\d{1,3})/;
var arr=reg.exec(rgb);
function hex(x) {
return ("0" + parseInt(x).toString(16)).slice(-2);
}
var _hex="#" + hex(arr[1]) + hex(arr[2]) + hex(arr[3]);
return _hex.toUpperCase();
}
如果发现文章有问题欢迎指正交流，看完点个赞一起学习一起进步，感谢大家的阅读~~
