图片取色器 - 获取任意像素的HEX色值

这个取色器做了什么

这是一支吸管，不是配色方案生成器：由您决定采样哪个像素，工具如实报告那里存的到底是什么。值得展开讲的是读数是怎么取的，因为最显而易见的做法其实暗藏错误。把整张图片画到一张画布上、再从画布上读回像素，在大照片上会失效——浏览器把画布总面积限制在约1670万像素，也就是4096乘4096上下，而一个2400万像素的相机文件轻松就超了。缩小图片来适配，又会让每一次采样都变成好几个原始像素的平均值，于是吸管最该做对的那件事反而第一个丢掉了。这里的做法是：采样时只围绕指针重绘一个小窗口，直接取自解码后的文件，并且严格按1比1绘制。源矩形和目标矩形尺寸相同，浏览器复制像素而不重采样，因此无论图片多大，您拿到的都是文件自己的字节。您看到的预览可能为了适配画布上限或您的屏幕而被缩放，但采样绝不会从预览上取。同一个窗口也供给放大镜，它把每个源像素画成13像素见方的方块、中间带网格线，并给中心格描上黑白双色轮廓，使它在任何颜色上都清晰可辨。您确实需要它：一张4000像素宽的照片排在720像素宽的栏目里，每个屏幕像素下面大约压着5.6个图像像素。方向键精确移动一个源像素，Shift加方向键移动十个，这是落在一像素细边或一条抗锯齿细边上的唯一可靠办法。每次取色都从同一组8位数值报出HEX、RGB和HSL；当像素并非完全不透明时，还会给出8位的HEXA和RGBA。真正需要知道的限制是色彩管理：多数浏览器的画布会丢弃内嵌的ICC配置文件，因此数值与浏览器绘制出来的一致，而不一定与有色彩管理的编辑器所显示的一致。