这是一款图片标记点坐标映射工具,基于 HTML5 Canvas + 原生 JavaScript + CSS 技术实现,用于解决同一张图在不同裁切比例下标注点错位的问题。
上传图片后,在画面上点击即可添加标记点,拖动微调位置,鼠标悬停时弹出放大镜辅助对齐,标记点颜色会依据背景明暗自动反色,始终清晰可辨。左右两套裁切方案(比例与锚点位置均可自定义,如 16:9 宽屏与 3:4 竖屏)可一键切换预览,工具会自动换算出每个点在两种裁切下的百分比坐标与相对尺寸缩放系数,列表中可逐项改名、调整大小或删除,最后一键复制为 JSON 数据,直接对接到项目里。全部计算在浏览器本地完成,图片不上传服务器。
适用于响应式页面热区标注、SVG 图标定位、产品图卖点标签、地图与图解注释等需要跨屏幕比例保持坐标准确的开发场景。