水印编辑器 — 使用指南

可视化创建视频水印和 Logo 叠加层。支持图片与文本水印、动态防录屏游走、铺满水印、模板变量和 ZWMAP JSON 导出。

概述

水印编辑器是一款基于浏览器的所见即所得编辑工具，用于创建视频水印配置。输出符合 ZWMAP/1.0 规范的 JSON，可由 ZWPlayer 在播放视频时渲染水印。

核心功能：

• 拖放创建图片水印
• 文本水印，支持模板变量和铺满模式
• 静态停靠、动态游走和铺满三种行为模式
• 视频画布实时预览
• 50 步撤销/重做历史
• JSON 导出 / 导入
• 从剪贴板粘贴图片 (Ctrl+V)

快速入门

1. 加载视频：在地址栏粘贴视频 URL，或将本地视频文件拖放到画布区域。
2. 添加水印：点击"+ 图片水印"或"+ 文本水印"按钮，也可以直接将图片文件拖放到画布上。
3. 可视化编辑：在画布上拖动水印调整位置，拖动角点调整图片大小。右侧面板实时更新属性。
4. 配置属性：在详情面板中调整透明度、行为模式、停靠方向、字体设置等。
5. 导出：点击"导出 JSON"下载配置文件，或点击"复制"将 JSON 复制到剪贴板。

图层类型

图片水印

用于品牌 Logo、频道图标等静态品牌标识。

• 添加方式：点击"+ 图片"按钮、将图片拖放到画布、或从剪贴板粘贴 (Ctrl+V)
• 图片来源：支持上传本地图片（自动转为 Base64）或直接输入图片 URL 地址
• 支持格式：PNG（推荐，支持透明）、JPG、SVG、WebP
• 宽高比锁定：默认开启，缩放时保持比例
• 行为模式：支持静态停靠和动态游走（不支持铺满模式）

文本水印

用于版权声明、用户追踪、动态信息显示、防录屏保护。

• 模板变量：使用 {key} 语法插入动态内容（见下文）
• 字号范围：10-72px
• 颜色格式：RGBA，默认半透明白色
• 自动尺寸：文本图层宽高自动适应内容
• 行为模式：支持静态停靠、动态游走和铺满三种模式

行为模式

静态停靠

水印固定在指定位置不动。适合品牌 Logo 和固定版权声明。

• 停靠方向：左 或 右 — 决定 X 坐标从哪条边计算。切换方向时坐标值自动转换
• 位置坐标：X/Y 以播放器容器的百分比表示，输入框后会标注参考起点（距左/距右/距顶）
• 尺寸：仅图片水印可手动设置宽高，文本水印自动适配内容大小

动态游走

水印在屏幕上移动。是防录屏保护的关键手段。

• 方向：水平、垂直、对角线 或 随机
• 速度：1-10（影响移动快慢）
• 出现间隔：隐藏后再次出现前的等待秒数（0 = 无间隔）
• 持续时间：每次循环可见的秒数（0 = 始终可见）
• 位置记忆：水印消失后再次出现时，从上次消失的位置继续移动

铺满（仅文本）

文本按倾斜角度和间隔铺满整个屏幕，形成密集的防录屏水印矩阵。仅文本水印支持此模式。

• 倾斜角度：-90° ~ 90°，默认 -30°（逆时针倾斜）
• 行间距：50-300px，控制垂直方向的文字密度
• 列间距：100-600px，控制水平方向的文字密度

模板变量

文本水印支持 {key} 模板变量，在播放时动态解析。

内置变量

自定义变量

任意 {key} 均可使用。值在播放时通过 variables 参数传入。

const player = new ZWPlayer({
  url: 'video.mp4',
  watermarks: config.watermarks,
  variables: {
    user_id: '138****1234',
    user_name: 'John',
    department: 'Engineering',
    ip_address: '192.168.1.100'
  }
});

未解析的变量会在播放器中原样显示。

示例

"Confidential | {department} | {user_name} | {sys_time}"
→ "Confidential | Engineering | John | 2026-05-08 14:30:00"

导出格式

复制 JSON

将 ZWMAP JSON 复制到剪贴板。图片以 Base64 数据 URI 或 URL 原始地址嵌入。

导出 JSON

下载 {title}_watermark.json 文件。

导入 JSON

从本地文件导入 ZWMAP JSON 配置，恢复所有水印图层及其属性。

快捷键

ZWMAP 协议

水印编辑器输出符合 ZWMAP/1.0 规范的 JSON：

{
  "zwp_protocol": "ZWMAP/1.0",
  "zwp_type": "watermark",
  "zwp_version": "1.0",
  "watermarks": [
    {
      "id": "wm-1",
      "type": "image",
      "behavior": "static",
      "icon": "logo.png",
      "dock": "right",
      "x": "5%", "y": "5%",
      "width": "15%", "height": "15%",
      "opacity": 70
    },
    {
      "id": "wm-2",
      "type": "text",
      "behavior": "dynamic",
      "text": "{user_id} | {sys_time}",
      "font_size": 16,
      "font_color": "rgba(255,255,255,0.3)",
      "opacity": 40,
      "movement": {
        "direction": "diagonal",
        "speed": 2,
        "interval": 0,
        "duration": 0
      }
    },
    {
      "id": "wm-3",
      "type": "text",
      "behavior": "tile",
      "text": "Confidential",
      "font_size": 16,
      "font_color": "rgba(255,255,255,0.15)",
      "opacity": 30,
      "tile": {
        "angle": -30,
        "rowSpacing": 120,
        "colSpacing": 300
      }
    }
  ]
}

水印格式说明

输入格式

ZWPlayer 支持三种水印传入方式：

1. URL 字符串 — 指向 ZWMAP JSON 文件的地址，播放器自动获取并解析。 — A URL pointing to a ZWMAP JSON file; the player fetches and parses it automatically. — A URL pointing to a ZWMAP JSON file; the player fetches and parses it automatically. — A URL pointing to a ZWMAP JSON file. The player fetches and parses it automatically.
2. ZWMAP 对象 — 包含完整协议头的 JSON 对象，播放器自动解包内部的 watermarks 数组。 — A JSON object with the full protocol header; the player extracts the inner watermarks array. — A JSON object with the full protocol header; the player extracts the inner watermarks array. — A complete JSON object with protocol headers. The player unwraps the inner watermarks array.
3. 水印数组 — 直接传入水印对象数组，无需协议头。 — A plain array of watermark objects, no protocol header required. — A plain array of watermark objects, no protocol header required. — A plain array of watermark objects, passed directly without protocol headers.

// URL string
watermarks: 'https://example.com/watermark.json'

// ZWMAP object
watermarks: { zwp_protocol: 'ZWMAP/1.0', zwp_type: 'watermark', watermarks: [...] }

// Plain array
watermarks: [{ type: 'image', behavior: 'static', icon: 'logo.png', ... }]

通用字段

图片水印字段

文字水印字段

动态游走字段

当 behavior 为 "dynamic" 时，添加 movement 对象：

铺满水印字段

当 behavior 为 "tile"（仅文字）时，添加 tile 对象：

ZWPlayer 集成

将导出的水印配置与 ZWPlayer 配合使用：

// 1. Load JSON configuration
const config = await fetch('watermark.json').then(r => r.json());

// 2. Initialize ZWPlayer with watermark configuration
const player = new ZWPlayer({
  playerElm: 'video-container',
  url: 'https://example.com/video.mp4',
  watermarks: config.watermarks,
  variables: {
    user_id: '138****1234',
    user_name: 'John',
    department: 'Engineering'
  }
});

集成要点：

• 水印位置基于播放器容器尺寸，而非视频分辨率
• 水印图层使用 pointer-events: none，不会阻挡播放器控件
• {sys_time} 每秒自动更新
• 自定义变量在播放时由 ZWPlayer 传入并解析
• 铺满模式水印覆盖整个视频区域，适合防录屏场景