图片坐标拾取
在图片上移动鼠标就能实时读出像素坐标和颜色，点一下钉住一个标记点并写备注，坐标按前端切图常用的几种格式一键复制。
选择图片、把文件拖进这个面板，或者直接按 Ctrl + V 粘贴剪贴板里的截图。图片只在这台浏览器里处理，不会上传。
没有图片时，按设计稿的宽高建一张空白画布就能换算坐标：空白画布上是 10 像素一格的浅网格，配合放大镜能对着格子定位。传了图片之后这两个输入框会跟着变成图片的真实尺寸。
空白画布
移动鼠标读坐标，点击钉住标记点。放大镜里每个小方块就是一个原始像素，中间被方框圈住的才是当前对准的那个。
还没量到显示尺寸
坐标一律按图片真实像素给出，取值从 0 开始，所以 X 最大是 749、Y 最大是 1333；再往外点会被夹到边界上。这和设计软件里从 1 开始的标尺差一位，从设计稿上量位置时先确认标尺从几开始。
使用说明
这一页和图片取色器共用同一套读像素的代码，差别在于主角是坐标。鼠标在图上移动时会实时给出当前像素的 X、Y 和颜色，点一下就把这个像素钉成一个标记点，每个点可以写一行备注，方便回头知道那个位置是什么。标记点会画在画布上，编号一直递增，删掉中间的点不会让后面的编号跳回去，所以列表里的编号和你在图上看到的一直对得上。选中一个点之后可以用方向键一像素一像素地挪，按住 Shift 一次挪十像素，对齐切图边界时比用鼠标点准得多。
最容易出错的一步是「显示尺寸不等于真实像素尺寸」。图片通常会被 CSS 约束到容器宽度，屏幕上量到的 100 像素在图上可能是 200 个像素，如果直接把 offsetX 当成图片坐标，拾出来的点会整体缩小，越靠右下偏得越多，缩到一半时右下角能偏出去几百像素。这里的做法是先用 getBoundingClientRect 量出元素真实的显示尺寸，再用「真实宽度除以显示宽度」把坐标换算回去，横纵分别算，所以图片被压扁或者拉长也能对上。之所以不用 offsetWidth，是因为它取整过而且会把边框算进去；页面上的缩放比会实时显示出来，看到它不等于 100% 就说明图被缩着看，而拾到的坐标仍然是原图的像素坐标。
像素坐标是 0 基的，这一点必须说清楚。一张 750 像素宽的图有 750 个像素，编号从 0 到 749，不存在第 750 列，所以 X 的最大值是宽减一、Y 的最大值是高减一，越界会被夹到边界上而不是报错。这和设计软件里常见的「从 1 开始」的标尺差一位，也是切图时最常见的错误来源：在设计稿上量到 x 等于 300，如果那个标尺是 1 基的，写进代码应该是 299。悬停坐标一律向下取整，因为第 i 个像素覆盖的是从 i 到 i+1 这一段，四舍五入会把落在第 i 个像素里的后半段算成下一个像素，边缘附近就会集体偏一格。
坐标按前端切图常用的几种写法一起给出。background-position 必须是负值，这是精灵图的惯例：把整张背景图往左上挪，让目标那一块正好落进容器里，写成正值会挪到反方向去；百分比写法虽然也叫 background-position，语义却是「让背景图的某个百分比位置对齐容器的同一个百分比位置」，属于对齐而不是偏移，容器尺寸一变结果就变，两种写法混用是常见事故。绝对定位用 left 和 top，图内元素反向挪动用负 margin，通用场合就复制最朴素的「x, y」。想只取色不管坐标，图片取色器那边有平滑取样和取色历史；要从整张图提炼主色并生成配色方案，用图片主色提取与配色方案；想把量好的坐标直接切成一张张小图，用图片切片；要一份能贴进切图标注的色卡，可以先在颜色转换里把色值统一成十六进制。
常见问题
点击的坐标为什么不直接用 offsetX，而要另外换算？
因为图片往往被 CSS 缩放到容器宽度，屏幕上看到的 100 像素在图上可能是 200 个像素。offsetX 给的是元素内部的显示坐标，直接拿来当图片坐标，越靠右下偏得越多，缩到一半时右下角的偏差会到几百像素。这里的做法是先拿 getBoundingClientRect 量出元素真实的显示尺寸，再用「真实宽度 ÷ 显示宽度」把它换算回去，所以图片怎么缩放，拾到的都是原图的像素坐标。
相关：图片切片
坐标的取值范围为什么是 0 到宽减一？
像素是 0 基索引的：一张 750 像素宽的图有 750 个像素，编号从 0 到 749，第 750 列并不存在。这和设计软件里显示的「1 开始」的标尺差一位，是最容易踩的坑——在设计稿上量到 x 等于 300 时，写进代码的应该是 300（如果标尺从 0 起）还是 299（如果标尺从 1 起），这一点必须先对齐。这一页统一按 0 基给出，坐标越界时会被夹到 749 这个最大值，而不是 750。
没有图片时为什么要能指定一张空白画布？
因为许多时候手里只有设计稿的尺寸和几个位置，没有能上传的图片文件。填上宽高（比如 750 × 1334）之后就能按同一套坐标系量位置，直接把点出来的坐标写进样式里，等切图到位再换上去。空白画布上会画一层 10 像素的浅色网格，配合放大镜能对着网格线大致定位。
为什么 background-position 要用负值？百分比写法不是更通用吗？
精灵图取图的原理是把整张背景图往左上挪，让目标那一块正好落进容器，所以偏移量是 -X 和 -Y，写成正值会挪到反方向去。百分比那种写法语义完全不同：它是「让背景图的某个百分比位置对齐容器的同一个百分比位置」，是定位而不是偏移，容器尺寸一变结果就变，两种写法混用是常见事故。所以这里把负值的像素写法单独列出来，百分比另外给一条并注明差别。
在浏览器里放大页面或者高 DPI 屏上，坐标还准吗？
准。整个换算只用 getBoundingClientRect 量出的实际显示尺寸，它本身就包含了页面缩放、CSS 变换和设备像素比的影响，不会像 offsetWidth 那样被取整、还把边框算进去。缩放比会实时显示在下面，图片被缩到 62% 显示时会写出来，你可以据此判断现在看到的是被缩小过的图。
拾到的颜色和我在设计软件里看到的不一样？
常见原因有三个：图片带透明通道时，画布会先合成到白底上再读像素，读到的是叠加白色之后的观感色，而不是文件里那个半透明像素的原始值；照片有噪点，相邻两个像素本来就不同色；以及设计软件可能带色彩管理，显示时做了配置文件的转换。这里的取色是无损读原始像素的，颜色对不上时先看是不是前两个原因。
图片会上传吗？能放多大的图？
不会上传。图片在本机解码、画到画布上再读像素，整个过程没有网络请求，断网也能用。也正因为要整张读进内存，图片越大越占内存，几千万像素的照片在页面上打开会明显变慢；单纯想量坐标的话，先用别的工具把图缩到实际使用尺寸再传进来会顺很多。
只想取色、不想管坐标，或者要提取整张图的配色怎么办？
只想取色的话，图片取色器那边有平滑取样和取色历史，更适合调色；要从整张图里提炼主色并生成配色方案，用主色提取页。这一页的差异点是坐标：能钉住多个点、给每个点写备注，并把坐标按前端切图常用的几种写法一键复制出去。