简介

水印是一种在页面内容上叠加半透明文字或图片的技术，通常用于标识页面来源、版权保护或防止内容被恶意复制。在 Web 开发中，水印可以动态生成并覆盖在页面的各个元素上。

水印的作用

1. 版权保护

• 在重要文档、图片或页面内容上添加版权信息
• 防止内容被未经授权使用或传播
• 明确标识内容的所有权

2. 品牌宣传

• 在页面中展示公司 logo 或品牌名称
• 提升品牌知名度和识别度
• 增强用户对品牌的记忆

3. 安全防护

• 防止页面内容被截图后恶意使用
• 在敏感信息页面添加用户标识
• 追踪内容泄露的来源

4. 状态标识

• 标识页面的状态（如”草稿”、”预览”等）
• 显示用户权限级别
• 标记页面版本信息

示例

canvas 实现

import React, { useEffect, useState } from "react";

export default function Watermark({
  text = "hello Watermark", // 水印文字
  font = "16px Microsoft YaHei", // 字体
  color = "rgba(0,0,0,0.15)", // 水印颜色
  rotate = -20, // 旋转角度
  gapX = 80, // 水平间距
  gapY = 60, // 垂直间距
}) {
  const [watermarkUrl, setWatermarkUrl] = useState("");

  useEffect(() => {
    // 创建canvas生成水印图片
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");
    // 计算canvas宽高 = 文字宽高 + 间距
    const width = 160 + gapX;
    const height = 60 + gapY;
    canvas.width = width;
    canvas.height = height;
    ctx.clearRect(0, 0, width, height);
    ctx.save();
    ctx.translate(width / 2, height / 2);
    ctx.rotate((Math.PI / 180) * rotate);
    ctx.font = font;
    ctx.fillStyle = color;
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.fillText(text, 0, 0);
    ctx.restore();
    setWatermarkUrl(canvas.toDataURL());
  }, [text, font, color, rotate, gapX, gapY]);

  return (
    <div
      style={{
        position: "fixed",
        left: 0,
        top: 0,
        width: "100vw",
        height: "100vh",
        zIndex: 9999,
        pointerEvents: "none",
        backgroundImage: `url(${watermarkUrl})`,
        backgroundRepeat: "repeat",
        opacity: 1,
      }}
    />
  );
}

@pansy/watermark 库实现

import React, { useEffect } from "react";
import { Watermark } from "@pansy/watermark";

const App = () => {
  useEffect(() => {
    const watermark = new Watermark({
      text: "Hello Watermark", // 水印文字
      fontSize: 16, // 水印字体大小
      fontColor: "#000", // 水印字体颜色
      fontWeight: "bold", // 水印字体粗细
      fontFamily: "Arial", // 水印字体
      fontStyle: "italic", // 水印字体样式
      fontVariant: "small-caps", // 水印字体变体
    });

    return () => {
      watermark.destroy();
    };
  }, []);

  return <div className="p-10 min-h-screen"></div>;
};

export default App;

参数说明

参数名	类型	默认值	明
text	string	–	水印文字
fontSize	number	16	水印字体大小
fontColor	string	#000	水印字体颜色
fontWeight	string	normal	水印字体粗细
fontFamily	string	Arial	水印字体
fontStyle	string	normal	水印字体样式
fontVariant	string	normal	水印字体变体
gapX	number	100	水印水平间距
gapY	number	100	水印垂直间距
offsetLeft	number	0	水印水平偏移量
offsetTop	number	0	水印垂直偏移量
width	number	200	水印宽度
height	number	200	水印高度
opacity	number	0.15	水印透明度
rotate	number	45	水印旋转角度
monitor	boolean	false	是否开启监视模式
image	string	–	水印图片地址
blindText	boolean	false	是否开启盲水印
blindFontSize	number	16	盲水印字体大小
blindOpacity	number	0.15	盲水印透明度
zIndex	number	–	水印层级
pack	boolean	false	是否使用水印组件包裹内容
container	HTMLElement,string,null	–	水印容器选择器
containerStyle	object	–	水印容器样式
mode	string	‘repeat’ ‘interval’	水印容器的定位方式

watermarkjs 图片水印实现

给图片添加水印，需要传入图片地址，水印会自动根据图片大小进行缩放，并自动添加到图片上。这并非给整个页面加水印。

import React, { useEffect, useRef } from "react";
import watermark from "watermarkjs";

const WatermarkText = () => {
  const containerRef = useRef(null);

  useEffect(() => {
    // watermarkjs 文字水印用法
    watermark(["/public/nature-1.jpg"])
      .image(
        watermark.text.lowerRight(
          "hello watermark",
          "24px Arial",
          "rgba(0,0,0,0.5)"
        )
      )
      .then((img) => {
        if (containerRef.current) {
          containerRef.current.innerHTML = "";
          containerRef.current.appendChild(img);
        }
      });
  }, []);

  return (
    <div>
      <div ref={containerRef}></div>
    </div>
  );
};

export default WatermarkText;