项目明水印实现

一、项目背景

水印是一种通过在数字内容上添加可见或不可见标识的技术，用于保护版权、防止盗版、验证内容的真实性，并提升品牌曝光。

最终实现效果：

二、实现思路

1. 生成 SVG 图像：根据配置（文本、样式、位置等）动态生成水印的 SVG 图像。
2. 转换为 Base64 并应用：将生成的 SVG 图像转换为 Base64 编码，并将其作为背景图应用到页面元素，形成水印效果。

2.1 生成 SVG 图像（伪代码）

function draw(config):
  // 从配置中获取水印文本和其他样式
  textList = config.textList≈
  fontSize = config.fontSize≈
  color = config.color
  pos = config.pos

  // 创建每个位置的水印内容
  for each position in pos:
      svgContent = ""
      for each text in textList:
          svgContent += createTextElement(text, position, fontSize, color)
      
  // 生成完整的 SVG 字符串
  svgStr = "<svg>...</svg>"

  // 编码为 Base64
  base64Url = encodeBase64(svgStr)
  return base64Url

2.2 转换为 Base64 并应用（伪代码）

function Watermark(config, userName):
  base64Url = null

  function drawBg():
      // 生成新的水印图像
      base64Url = draw(config)
      
      // 定时更新水印
      if userName is not empty:
          wait 60 seconds
      else:
          wait 10 seconds
      drawBg()

  // 初始调用生成水印
  drawBg()

  // 创建样式对象
  styleObj = {
    
     backgroundRepeat: 'repeat' }
  if base64Url is not null:
      styleObj.backgroundImage = "url(" + base64Url + ")"
  
  // 渲染水印
  return createElement("div", {
    
     style: styleObj }, children)