fx-admin（伏羲氏）

FxWatermarkDecoder 暗水印解析 ​

把带暗水印的图片还原成可见图像。内置上传 + 参数面板（主题 / 合成操作 / 合成次数 / 填充色）+ 结果对比，参数实时可调。基于 watermark-js-plus，复用同包 @fx 组件（FxUpload / FxImage / FxSelect / FxInputNumber / FxColorPicker / FxRadioGroup）。

FxWatermarkDecoder 属于 @fx/components。

基础用法 ​

选图后自动解码，在参数面板里实时调整直到水印最清晰，点击图片可放大预览。

参数面板 ​

参数控件说明
主题浅色背景 / 深色背景（FxRadioGroup）受 v-model:theme 控制（默认 light），可手动切换；浅色 → #000 / overlay / 4 次，深色 → #fff / overlay / 3 次
合成操作FxSelect（可搜索）canvas globalCompositeOperation 全集（26 种）
合成次数FxInputNumber越多越明显，过高会让背景变脏
填充色FxColorPicker显形关键：浅色背景用 #000，深色背景用 #fff

调试指南（解析不清时） ​

暗水印强度极低（globalAlpha: 0.005），解码效果高度依赖参数与截图质量。看不清时按顺序排查：

  1. 主题 / 填充色：浅色 / 白色背景图选「浅色背景」（#000），深色背景图选「深色背景」（#fff）。最常见原因。
  2. 合成次数：调高（4–8）让水印更明显，过高会让背景变脏。
  3. 合成操作：overlay 通用；color-burn 对比更强但画面更暗。
  4. 截图格式：必须用 PNG 无损截图。JPG / WebP 有损压缩会破坏暗水印噪点，导致无法还原。
  5. 背景复杂度：纯色背景最易还原；复杂图片 / 多次转载压缩后可能无法还原——这是暗水印的固有限制。

局部引入 ​

ts
import { FxWatermarkDecoder, decodeBlindWatermark } from "@fx/components"

API ​

Attributes ​

属性说明类型默认值
theme (v-model:theme)主题预设（浅色/深色背景）'light' | 'dark''light'
downloadable是否显示结果图下载按钮booleanfalse
download-name下载文件名（含扩展名）string'watermark-decoded.png'

Events ​

事件说明载荷
success解码成功base64: string
error解码失败—

Slots ​

名称说明
trigger自定义 FxUpload 选择按钮

Exposes ​

名称说明类型
decode手动触发解码() => Promise<void>

工具函数 ​

decodeBlindWatermark(options) ​

解析暗水印图片，返回解码后图片 base64（Promise）。库 BlindWatermark.decode 无 onError，本封装补 url/mode 校验 + 超时兜底。

ts
await decodeBlindWatermark({
  url: "light-bg.png",
  fillColor: "#000",
  compositeOperation: "overlay",
  compositeTimes: 4,
})
参数类型说明
urlstring图片 URL/base64（必填）
fillColorstring填充色
compositeOperationstring合成操作
compositeTimesnumber合成次数
mode'canvas' | 'html' | 'svg'仅 canvas 由库支持

实现说明 ​

  • 暗水印把信息藏进图像噪点，解码产物是图像（base64），不是文字；需肉眼查看或后续 OCR。
  • 解码参数全部内置在面板（不对外暴露为 prop），调参实时重新解码；对外仅 downloadable / download-name。
  • 内置 FxUpload 仅作本地选图器（auto-upload=false，不发请求），on-change 拿 raw → FileReader base64 → 解码。
  • 解码仅支持 mode: 'canvas'，传 html/svg 会 reject。