# obsidian-image-up

**Repository Path**: wn2019/obsidian-image-up

## Basic Information

- **Project Name**: obsidian-image-up
- **Description**: obsdian图片插件，支持ipad和windows，主要支持在图片上涂鸦做笔记
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-09-25
- **Last Updated**: 2026-11-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Obsdian

## README

# Image Up

<p align="right"><strong>简体中文</strong> | <a href="README_EN.md">English</a></p>

在 Obsidian 笔记里直接标注图片的全功能插件：**长按 / 右键图片即可进入全屏标注面板**，提供画笔、橡皮擦、喷涂、直线、波浪线、套索移动、文字等工具，完整适配 **iPad（触屏 / 长按 / 双指缩放）** 与 **Windows 桌面（右键 / Ctrl+滚轮）**。

> 支持 `png` / `jpg` / `jpeg` / `webp` / `gif` / `bmp`，最大编辑尺寸 4096px，缩放范围 1–8 倍。

---

## ✨ 功能总览

| 分类 | 功能 |
| --- | --- |
| 图片菜单 | 编辑图片 · 剪切图片 · 删除图片（滚动屏幕自动收起） |
| 绘制工具 | 画笔 · 橡皮擦 · 喷涂 · 直线 · 波浪线 |
| 区域工具 | 套索移动（圈选后拖动内容）· 文字（框选区域输入文字） |
| 编辑操作 | 撤销 / 重做 · 全部撤销 · 缩放细节 · 旋转 90° |
| 保存方式 | 替换原图（默认）或另存为新图片并自动更新笔记链接 |

---

## 📂 打开方式

### 1. 长按 / 右键图片菜单

在阅读或编辑视图中：

- **iPad / 触屏**：长按图片约 600ms 弹出菜单；
- **Windows / 桌面**：右键点击图片弹出菜单。

菜单包含三项：

| 菜单项 | 说明 |
| --- | --- |
| **编辑图片** | 打开全屏标注面板 |
| **剪切图片** | 把该图片的 markdown 引用复制到剪贴板，并从当前笔记中移除引用（**图片文件保留**，方便把图片挪到其他笔记） |
| **删除图片** | 从笔记中移除图片引用 |

> 已处理 iPad WKWebView 的长按与原生 contextmenu 双触发去重（600ms 内只弹一次）；剪切图片的剪贴板调用放在菜单点击手势的同步链路内，保证 iPad 上能成功写入剪贴板。**长按弹出菜单后，滑动屏幕会自动收起菜单**，不会挡住浏览。

### 2. 命令面板（iPad 备用入口）

命令面板执行 **「标注当前笔记中的图片」**：

- 笔记中只有一张图片时直接打开标注面板；
- 有多张图片时先弹出列表选择。

---

## 🖌 标注工具详解

标注面板顶部为工具栏，选中工具后在下方**悬浮弹层**中调色与调粗细（悬浮层不挤压画布编辑区）。

### 绘制类

- **画笔**：自由手绘，连续粗细滑杆调节，**与直线粗细相互独立**；
- **橡皮擦**：真透明擦除（`destination-out`），擦掉后露出图片下层原始内容；
- **喷涂**：涂抹式填充颜色，默认填充白色，适合快速遮盖原有笔迹或脏点；
- **直线**：拖拽绘制直线，独立粗细；
- **波浪线**：拖拽从起点到终点绘制正弦波浪线，振幅与波长跟随粗细自动缩放，周期数取整保证两端落在中线上。

### 套索移动（写错位置不用擦）

1. 圈选一块**任意形状的封闭区域**；
2. 在区域内按住拖动，区域内容跟随移动，**原位置自动填白**；
3. 落点不满意？继续拖动**同一个选区**即可调整——中间落点会恢复原图，只保留最初圈出的白洞，不会越拖白块越多；
4. 也可以重新圈选开新的搬移。

> 其后绘制的笔迹不跟随搬移（保留原位），历史采用全量重放模型，撤销 / 旋转 / 搬移互不污染。

### 文字

1. 选择 **文字** 工具，在图片上**框选一块区域**；
2. 松手后出现输入框，输入文字，**编辑时即自动换行**，与确认后的最终效果一致；
3. **方框左上角移动手柄**可整体拖动方框换位置，**右下角拖拽手柄**可调整方框大小，文字实时跟随重新折行；
4. 方框右下角是两个**圆形图标按钮**（✓ 确认 / ✕ 取消），尺寸随方框大小自动缩放，小方框也不会被按钮挡住；
5. 在悬浮参数层中可随时调整 **颜色** 与 **字号**，输入框实时预览；
6. 点击 **✓**（或 `Ctrl/⌘ + Enter`）提交，点击 **✕**（或 `Esc`）放弃；
7. 提交后文字按画布真实分辨率渲染（缩放状态下自动换算实际字号），可被撤销 / 重做。

> iPad 适配：输入区放行原生 touch 事件，保证软键盘正常弹出。

### 编辑操作

- **撤销 / 重做**：无可操作步骤时按钮自动置灰；
- **全部撤销**：一键清空所有标注；
- **缩放细节**：`Ctrl + 滚轮`（桌面）或**双指捏合**（iPad）放大局部精细绘制，1–8 倍；
- **旋转 90°**：图片与已有笔迹一起旋转（保存时生效），套索位移与文字排版均已适配旋转；
- **保存**：按设置中的保存策略写入；**关闭**：放弃未保存修改。

---

## ⚙️ 设置项

| 设置 | 默认值 | 说明 |
| --- | --- | --- |
| 默认画笔颜色 | — | 打开标注面板时画笔的初始颜色 |
| 画笔粗细（下限 / 上限 / 默认值） | 1 / 40 / 3 | 画笔粗细滑杆的可调范围与初始值 |
| 直线/波浪线粗细（下限 / 上限 / 默认值） | 1 / 40 / 3 | 直线与波浪线粗细滑杆的可调范围与初始值，与画笔相互独立 |
| 涂改/喷漆粗细（下限 / 上限 / 默认值） | 1 / 100 / 20 | 橡皮擦与喷涂的粗细范围（旧版上限固定 40，可自行调大） |
| 粗细滑杆长度 | 160 px | 粗细滑杆（长方形方框）的长度，范围 80–480 |
| 默认文字颜色 | `#ff453a` 红色 | 文字工具初始颜色，可在色板中临时更换 |
| 文字字号（下限 / 上限 / 默认值） | 8 / 96 / 24 | 字号滑杆的可调范围与初始值 |
| 默认字体 | 系统默认（黑体） | 可选：系统默认（黑体）/ 宋体（衬线）/ 楷体 / 等宽 |
| 保存时替换原图片 | 开启 | **开启**：直接覆盖原图片文件；**关闭**：在原位置生成 `image-时间戳` 新图片，并自动把笔记中的引用更新为新图片 |

所有「下限 / 上限 / 默认值」三格输入均会自动纠正顺序（如上限小于下限时自动调整）。

---

## 📱 平台适配要点

| 场景 | iPad / 触屏 | Windows / 桌面 |
| --- | --- | --- |
| 打开菜单 | 长按图片 | 右键图片 |
| 缩放 | 双指捏合 | Ctrl + 滚轮 |
| 精细绘制 | 放大后单指绘制 | 放大后鼠标绘制 |
| 命令入口 | 命令面板「标注当前笔记中的图片」 | 同左 |

针对 iPad WKWebView 做了大量专项处理：长按与 contextmenu 去重、手掌误触忽略、多指触控打断保护、文字输入区放行原生触摸（保证键盘弹出）、剪贴板手势链路适配等。**关闭标注面板时主动清除焦点并禁止 Obsidian 恢复笔记选区**，避免返回笔记后弹出 iOS 输入辅助栏（撤回/键盘切换/语音那条小面板）。

---

## 🔧 安装与构建

### 手动安装

把 `main.js`、`styles.css`、`manifest.json` 三个文件放入你的库目录：

```
<你的库>/.obsidian/plugins/image-up/
```

然后在 Obsidian 设置 → 第三方插件中启用 **Image Up**。

### 从源码构建

```bash
npm install
npm run build
```

构建产物在项目根目录（`main.js` / `styles.css`），配合 `manifest.json` 一起分发即可。

---

## 📄 许可证

MIT