图片标注工具

图片标注是在图像上添加视觉标记的过程——箭头、矩形、圆形、文字标签、高亮和模糊——以引起对特定区域的注意或传达额外信息。常见用例包括：软件教程（用箭头和标签突出显示按钮和菜单项）、设计反馈（圈出问题并添加评论）、错误报告（用复现步骤标注截图）和隐私遮挡（模糊人脸、车牌或敏感文字）。

技术实现使用 Canvas API 的 2D 绘图上下文。矩形用 strokeRect() 和 fillRect() 绘制。圆形和箭头使用 arc() 和 lineTo() 加 stroke()。文字用 fillText() 和 strokeText() 渲染。高亮使用半透明填充色。模糊通过以降低分辨率绘制选定区域并放大回来实现，或通过对裁剪区域应用 CSS filter: blur()。每个标注存储为数组中的对象，允许撤销/重做和重新渲染。

对于隐私遮挡，模糊优于纯色覆盖，因为它保留了一些视觉上下文（您仍然可以看到有文字或人脸），同时使内容不可读。然而，模糊在密码学上并不安全——复杂的算法有时可以恢复模糊的文字。对于真正敏感的信息（密码、身份证号），请使用纯黑色矩形而不是模糊。模糊强度（半径）应至少为 10-15 像素以防止恢复。

对不同类型的标注使用一致的颜色：红色表示错误或问题，绿色表示正确项目，蓝色表示信息，黄色表示高亮。保持标注最少——图片上过多的标记会创建视觉噪音并降低清晰度。使用箭头指向特定元素而不是圈选大区域。用数字或简短文字标注每个标注，以便观看者可以按顺序跟随。

创建教程时，按步骤顺序标注截图。使用标注框（带彩色背景和指向相关区域的箭头的文字）进行分步说明。将标注的图片导出为 PNG（而非 JPEG）以避免文字和锐利线条周围的压缩伪影。如果标注的图片将在高 DPI 屏幕上显示，以 2x 分辨率渲染并使用 CSS 缩小以获得清晰的文字和线条。