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 里会报跨域，可以放到服务器上或自己起个服务，若哪位大佬有更好的方法望告知，非常感谢~
代码
getcolor
## 结果
在这里插入图片描述
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();
}
如果发现文章有问题欢迎指正交流，看完点个赞一起学习一起进步，感谢大家的阅读~~