更新记录

1.0.1（2025-11-21）

修复编译问题

1.0.0（2025-11-21）

✨ 新增功能

平台兼容性

uni-app(3.6.14)

uni-app x(3.6.14)

其他

hy-smart-watermark

可动态配置的全端防截屏智能水印插件

✨ 特性

• 🎨 文本/图片水印 - 支持文本和图片两种水印类型
• 🔒 安全防护 - 采用原生 Canvas 渲染，不易被 DOM 操作移除
• 🎭 动态浮动 - 支持静态和动态浮动两种模式，动态水印实时位移，增加抠图难度
• 🔐 伪随机加密 - 可选密钥生成伪随机偏移序列，增加防篡改难度
• 📱 全端兼容 - H5 / App (Android/iOS) / 小程序全平台支持
• 📏 自动适配 - Android 端自动处理 dp/px 单位转换，确保多端显示大小一致
• ⚡ 高性能 - 原生渲染，流畅不卡顿
• 🎯 零权限 - 无需任何系统权限
• 🛠️ 易集成 - 简单配置，开箱即用

🚀 快速开始

API 方式调用（APP 端推荐）

<template>
  <view>
    <button @click="addWatermark">添加水印</button>
    <button @click="removeWatermark">移除水印</button>
  </view>
</template>

<script>
import { createWatermark, destroyWatermark } from '@/uni_modules/hy-smart-watermark'

export default {
  data() {
    return {
      watermarkId: ''
    }
  },
  methods: {
    addWatermark() {
      createWatermark({
        content: '保密文档 - 禁止截屏',
        type: 'text',
        mode: 'dynamic',
        fontSize: 16,      // 逻辑像素 (dp/pt)
        fontColor: '#000000',
        opacity: 0.15,
        rotate: -20,
        gapX: 200,         // 逻辑像素 (dp/pt)
        gapY: 150,         // 逻辑像素 (dp/pt)
        floatRange: 5,     // 逻辑像素 (dp/pt)
        secret: 'my-secret-key',
        success: (res) => {
          this.watermarkId = res.watermarkId
          console.log('水印创建成功', res)
        },
        fail: (err) => {
          console.error('水印创建失败', err)
        }
      })
    },
    removeWatermark() {
      if (this.watermarkId) {
        destroyWatermark({
          watermarkId: this.watermarkId,
          success: (res) => {
            console.log('水印销毁成功', res)
          }
        })
      }
    }
  }
}
</script>

组件方式调用（H5/小程序推荐）

<template>
  <view>
    <hy-watermark
      content="保密文档 - 禁止截屏"
      :visible="showWatermark"
      mode="dynamic"
      :fontSize="16"
      :opacity="0.15"
      :rotate="-20"
      :gapX="200"
      :gapY="150"
      :floatRange="5"
      secret="my-secret-key"
    />

    <button @click="showWatermark = !showWatermark">
      {{ showWatermark ? '隐藏水印' : '显示水印' }}
    </button>
  </view>
</template>

<script>
import HyWatermark from '@/uni_modules/hy-smart-watermark/components/hy-watermark/hy-watermark.vue'

export default {
  components: {
    HyWatermark
  },
  data() {
    return {
      showWatermark: true
    }
  }
}
</script>

📖 API 文档

createWatermark(options)

创建水印实例。

参数说明 (WatermarkOptions)

💡 单位说明：所有数值类型的参数（fontSize, gapX, gapY, floatRange 等）均使用逻辑像素 (dp/pt)。插件内部会自动处理 Android 端的 dp 转 px，确保在不同像素密度的设备上显示大小一致。

返回值（success 回调）

{
  watermarkId: string,  // 水印实例ID
  success: boolean,     // 是否成功
  message: string       // 消息
}

destroyWatermark(options)

销毁水印实例。

updateWatermark(params)

更新已存在的水印实例配置。

参数说明 (UpdateParams)

🎯 使用场景

• 📄 企业文档 - OA系统、文档管理、合同查看
• 🎓 在线教育 - 课件展示、考试系统、培训平台
• 📊 数据报表 - 敏感数据展示、BI系统
• 💼 商业应用 - CRM、ERP等企业级应用
• 🏥 医疗系统 - 病历查看、检查报告
• 🏦 金融应用 - 账户信息、交易记录

⚠️ 注意事项

1. 前端水印非绝对安全：前端水印主要起到提醒和威慑作用，无法完全阻止截屏（如系统级截屏），如需绝对安全请配合后端措施（如DRM）。
2. 性能考虑：动态浮动模式 (mode: 'dynamic') 会持续触发重绘，虽然已做性能优化，但在低端设备上仍建议谨慎使用或减少水印数量（增大 gapX/gapY）。
3. 单位适配：插件已内置单位转换，开发时请统一使用逻辑像素 (dp/pt)，无需手动计算物理像素。
4. 层级遮挡：默认 zIndex 为 9999，如果被其他组件遮挡，请适当调大该值。

🔧 进阶配置

自定义动态浮动

createWatermark({
  content: '机密文件',
  mode: 'dynamic',
  floatRange: 10,          // 增大浮动范围 (dp)
  floatDuration: 2000,     // 加快动画速度 (2秒一圈)
  secret: 'random-seed'    // 使用密钥生成固定的随机轨迹
})

图片水印

createWatermark({
  type: 'image',
  content: '/static/logo.png', // 支持本地路径或网络URL
  width: 100,
  height: 50,
  opacity: 0.2
})

高密度水印

createWatermark({
  content: 'CONFIDENTIAL',
  gapX: 100,    // 减小间距
  gapY: 80,
  fontSize: 12,
  opacity: 0.1
})