ImageSplice Pro | 图片粘贴裁剪接续工具

一个基于 HTML5 Canvas 的图片处理工具，支持粘贴图片、追加图片、拖拽选择区间删除接续、标注、打码等功能。

功能特性

• 丰富标注工具 - 支持选择删除区间、马赛克、画箭头、划线、矩形、圆形/椭圆、数字标注、文字标注，支持快捷键快速切换。
• 区间裁剪接续 - 使用"删除区间"工具拖拽选择垂直区间，按 Delete 键删除后自动平滑接续，并同步平移下方所有标注。
• 多种拖拽选择模式：
  • 普通拖拽 = 重置选中区间
  • Ctrl + 拖拽 = 增加选中区间
  • Shift + 拖拽 = 从已有区间减掉
• 矩形马赛克 - 支持矩形区域打码，效果自然。
• 矢量化标注层：
  • 画箭头：绘制渐进式箭头。
  • 划线：支持 Shift 锁定水平方向。
  • 矩形：支持 Shift 锁定为正方形。
  • 圆形/椭圆：从圆心开始绘制，支持椭圆，支持 Shift 锁定为正圆。
  • 数字标注：点击放置递增数字圆圈（1, 2, 3...）。
  • 文字标注：自定义文字内容并点击放置。
• 标注元素交互 - 所有标注元素（箭头、线、矩形、圆、数字、文字）以及追加的图片均可自由拖拽移动，选中后按 Delete 删除。
• 撤销/重做 - 支持多达 30 步的 Ctrl + Z 撤销和 Ctrl + Y 重做。
• 内容重置 - 一键恢复到最初粘贴的图片状态。
• 缩放还原 - 支持画布缩放查看细节，并可一键还原 1:1 比例。

使用方法

1. 打开页面，按 Ctrl + V 粘贴主图。
2. 再次按 Ctrl + V 可根据鼠标位置追加副图，追加图可拖拽移动。
3. 使用"删除区间"工具（快捷键 S）选择要删除的垂直区间，按 Delete 执行删除并接续。
4. 使用各标注工具在图上添加说明，支持修改颜色和粗细。
5. 所有元素添加后均可拖拽调整位置，或选中后按 Delete 移除。
6. 点击"下载"保存处理后的 PNG 图片。

快捷键参考

快捷键	功能
Ctrl + V	粘贴图片（首次粘贴主图，再次粘贴为追加图）
S	切换到"删除区间"工具
M	切换到"矩形马赛克"工具
A	切换到"画箭头"工具
L	切换到"划线"工具（按 Shift 锁定水平）
R	切换到"矩形"工具（按 Shift 锁定正方形）
C	切换到"圆形/椭圆"工具（从圆心绘制，按 Shift 锁定正圆）
N	切换到"数字标注"工具
T	切换到"文字标注"工具
Delete	删除选中的区间或选中的元素（标注/图片）
Ctrl + Z	撤销
Ctrl + Y	重做
Ctrl + 滚轮	缩放画布

技术实现

• 纯前端实现，使用 HTML5 Canvas。
• 采用双层结构：基础像素层（主图+马赛克）+ 矢量标注层（元素+追加图）。
• 坐标变换算法：在删除图像区间时，自动计算并平移受影响的所有标注和追加图坐标。

在线访问

https://winse.github.io/image_splice/