dsh-image-annotate：給 DeepSeek Harness 加一支畫筆

前言¶

在使用 DeepSeek Harness（DSH）開發或使用智能體時，常遇到需要向模型指出圖片中具體問題的場景。傳統做法是截圖、上傳圖片，再通過文字描述“這裏”、“那個位置”。這種方式在圖片信息複雜或模型理解偏差時，溝通成本較高。

dsh-image-annotate 插件旨在解決這一問題。它不改變 DSH 的預覽邏輯，而是在圖片預覽層疊加了一支標註筆。用戶可以直接在圖片上圈點、添加文字說明，並將標註後的 PNG 原圖直接送入輸入框，隨後繼續打字發送。

插件定位¶

這是一個爲 DeepSeek Harness 圖片預覽添加標註功能的插件，由 zhishengplus 維護，採用 MIT 許可證。插件本身零依賴、無構建步驟，僅作爲預覽層的增強存在。

核心能力¶

該插件提供了以下功能：

• 七種標註工具：移動、畫筆、箭頭、方框、圓圈、文字、橡皮擦。
• 全程可編輯：所有標註（包括圓圈和方框）都是對象，支持選中、拖動、縮放、雙擊改字、刪除和撤銷。
• 原生外觀：工具條、按鈕和選中框均使用 DSH 的設計 token（如 --dsw-menu-surface-fill），自動適配深淺色主題。
• 一鍵合成：支持將原圖與標註層合併爲 PNG，通過原生粘貼通道送入輸入框；若失敗則依次降級爲拖放、剪貼板或下載。
• 多源支持：適用於消息裏的截圖、輸入框草稿圖以及工具返回的圖片。

使用步驟¶

1. 在會話中點開任意圖片。
2. 預覽窗口右下角會出現一個圓形的 標註 按鈕（與關閉按鈕樣式一致），點擊它。
3. 選擇工具（如圓圈、方框或文字）在圖上進行標註。
4. 如果位置不合適，直接拖動標註對象。
5. 點擊 加入輸入框，標註圖會自動進入輸入框，隨後繼續打字發送。

快捷鍵參考¶

• V：選擇 / 移動模式
• 1 – 7：切換工具（移動、畫筆、箭頭、方框、圓圈、文字、橡皮擦）
• E：橡皮擦
• Ctrl/⌘ + Z / Ctrl/⌘ + Shift + Z：撤銷 / 重做
• Delete：刪除選中
• 方向鍵（配合 Shift 加速）：微調位置（1px / 10px）
• 文字工具：點擊輸入文字，回車確認，Esc 取消

安裝方法¶

在終端中執行以下命令進行安裝：

dsh plugin --profile <PROFILE> add github:zhishengplus/dsh-image-annotate

安裝後，該插件會出現在對應 Profile 的 package.json 配置中。首次安裝後需要重啓一次 DSH。

技術說明¶

• 運行環境：插件本身運行在瀏覽器端。倉庫腳本開發環境需要 Node >= 20。
• 安全性處理：導出圖片時，使用 fetch(src) 獲取圖片 Blob 並解碼，避免跨源 drawImage 導致的 toBlob SecurityError。
• DOM 識別：插件通過 MutationObserver 監聽，只識別滿足特定條件的節點（body 之下、div[role="dialog"][aria-modal="true"] 且直接子元素包含 <img> 的節點）作爲預覽容器。

生態與鏈接¶

該插件屬於 DSH 插件生態，可在社區目錄查看詳情。

• 倉庫地址：https://github.com/zhishengplus/dsh-image-annotate
• 插件目錄：https://www.skillhub.cn/plugins/zhishengplus/dsh-image-annotate