前端水印实现方式

于 2025-03-03 20:09:40 发布
阅读量1k 收藏 10
点赞数 30
分类专栏： 前端场景功能 文章标签： 前端 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/IO14122/article/details/145998117
版权

一、简介

简单来说，前端水印就是在网页或应用程序的前端界面上添加的一种标记，通常是文本、图标或图案等形式。它就像给你的数字内容贴上了一个独特的 “标签”，用于标识内容的归属、防止未经授权的使用和传播。比如，一些在线图片库网站会在用户浏览的图片上添加透明的水印，显示图片的版权信息；视频平台也会在播放的视频角落显示平台名称或用户标识作为水印。

使用价值：

  1. 信息防盗：防止敏感信息截图/录屏传播（金融/政务场景）

  2. 数据溯源：通过隐藏标识追踪泄露源头

  3. 品牌标识：增强产品品牌曝光（Saas类产品常见）

二、技术实现方案对比

1. DOM元素覆盖方案

实现原理：通过绝对定位div覆盖目标区域

<style>
.watermark {
  position: absolute;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.3;
  transform: rotate(-15deg);
}
</style>

<script>
function createDOMWatermark(text) {
  const watermark = document.createElement('div');
  watermark.className = 'watermark';
  watermark.textContent = text;

  // 动态计算位置
  const updatePosition = () => {
    const { clientWidth, clientHeight } = document.documentElement;
    watermark.style.width = `${clientWidth}px`;
    watermark.style.height = `${clientHeight}px`;
  };

  window.addEventListener('resize', updatePosition);
  updatePosition();
  
  document.body.appendChild(watermark);
  
  // 防删除保护
  const observer = new MutationObserver((mutations) => {
    if (!document.contains(watermark)) {
      document.body.appendChild(watermark.cloneNode(true));
    }
  });
  observer.observe(document.body, { childList: true });
}
</script>

优势：实现简单、支持动态更新
缺陷：易通过开发者工具篡改、性能开销大

2. Canvas动态绘制方案

实现原理：生成Base64图片作为背景

function createWatermarkCanvas(text) {
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");
  canvas.width = 300;
  canvas.height = 200;

  ctx.fillStyle = "rgba(100,100,100,0.3)";
  ctx.font = "16px Arial";
  ctx.rotate((-20 * Math.PI) / 180);
  ctx.fillText(text, 40, 180);

  const dataUrl = `url(${canvas.toDataURL("image/png")})`;
  document.body.style.backgroundImage = dataUrl;
  // 防止删除元素
  const observer = new MutationObserver((mutations) => {
    if (
      mutations.some(
        (m) =>
          m.target === document.body &&
          m.attributeName === "style" &&
          !m.target.style.backgroundImage
      )
    ) {
      document.body.style.backgroundImage = dataUrl;
    }
  });
  observer.observe(document.body, {
    childList: true,
    subtree: true,
    attributes: true,
    attributeFilter: ["style"],
  });
}

export default createWatermarkCanvas;

优势：防篡改等级中等、支持复杂图形
缺陷：高清屏模糊、无法动态更新内容

3. SVG矢量方案

function createSVGWatermark(text) {
  const svg = `
  <svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
    <text x="50" y="180"
          transform="rotate(-20 50,180)"
          fill="rgba(100,100,100,0.3)"
          font-size="16">
      ${text}
    </text>
  </svg>`;
  // 编码为 base64
  const btoa = (str) => window.btoa(unescape(encodeURIComponent(str)));
  const dataUrl = `url(data:image/svg+xml;base64,${btoa(svg)})`;
  document.body.style.backgroundImage = dataUrl;
  // 防止删除元素
  const observer = new MutationObserver((mutations) => {
    if (
      mutations.some(
        (m) =>
          m.target === document.body &&
          m.attributeName === "style" &&
          !m.target.style.backgroundImage
      )
    ) {
      document.body.style.backgroundImage = dataUrl;
    }
  });
  observer.observe(document.body, {
    childList: true,
    subtree: true,
    attributes: true,
    attributeFilter: ["style"],
  });
}
export default createSVGWatermark;

优势：矢量清晰、支持复杂图形
缺陷：旧浏览器兼容性问题

4. 常用水印插件

4.1 watermark-dom
  • 简介：这是一个轻量级的 JavaScript 库，专门用于为网页添加水印。它使用简单，可高度定制水印的样式和内容。
  • 特点
    • 支持自定义水印的文本内容、字体、颜色、透明度、旋转角度等。
    • 可以通过 JavaScript 动态创建和修改水印。
    • 可以应用到指定的 DOM 元素或整个页面。
  • 使用示例
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Watermark Example</title>
    <script src="https://cdn.jsdelivr.net/npm/watermark-dom@3.0.4/dist/watermark.min.js"></script>
</head>

<body>
    <div id="content">
        这是页面的主要内容。
    </div>
    <script>
        watermark({
            watermark_txt: 'Confidential',
            watermark_x: 20,
            watermark_y: 20,
            watermark_rows: 20,
            watermark_cols: 20,
            watermark_x_space: 50,
            watermark_y_space: 50,
            watermark_font: '微软雅黑',
            watermark_color: 'rgba(0, 0, 0, 0.15)',
            watermark_fontsize: '18px',
            watermark_alpha: 0.1,
            watermark_angle: 20
        });
    </script>
</body>

</html>
4.2 vue-watermark-directive
  • 简介：专为 Vue.js 框架设计的水印指令插件，方便在 Vue 项目中快速添加水印。
  • 特点
    • 以指令的形式使用，简单易用，与 Vue 组件集成良好。
    • 支持动态更新水印内容和样式。
    • 可以应用到单个组件或整个应用。
  • 使用示例
npm install vue-watermark-directive

<template>
    <div v-watermark="'Secret Information'">
        这是 Vue 组件的内容。
    </div>
</template>

<script>
import VueWatermarkDirective from 'vue-watermark-directive';

export default {
    directives: {
        watermark: VueWatermarkDirective
    }
};
</script>
4.3 react-watermark
  • 简介：用于 React 项目的水印组件，帮助开发者在 React 应用中轻松添加水印。
  • 特点
    • 提供了封装好的 React 组件，方便在 JSX 中使用。
    • 支持自定义水印的各种属性，如文本、颜色、大小等。
    • 可以根据组件的状态动态更新水印。
  • 使用示例
npm install react-watermark

import React from 'react';
import ReactDOM from 'react-dom/client';
import Watermark from 'react-watermark';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <Watermark content="Copyright" fontSize={16} color="rgba(0, 0, 0, 0.2)">
        <div>
            这是 React 应用的内容。
        </div>
    </Watermark>
);
4.4 jquery-watermark
  • 简介：基于 jQuery 库的水印插件，适合已经在项目中使用 jQuery 的开发者。
  • 特点
    • 利用 jQuery 的选择器和方法，方便地为指定元素添加水印。
    • 可以通过配置参数自定义水印的样式和行为。
  • 使用示例
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Watermark Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-watermark@1.0.0/dist/jquery.watermark.min.js"></script>
</head>

<body>
    <div id="target">
        这是要添加水印的元素。
    </div>
    <script>
        $(document).ready(function () {
            $('#target').watermark({
                text: 'Private',
                font: 'Arial',
                color: 'rgba(0, 0, 0, 0.1)',
                fontSize: '20px'
            });
        });
    </script>
</body>

</html>

这些插件各有特点，可以根据项目的技术栈和具体需求选择合适的水印插件。

三、安全增强方案

  1. DOM监控系统
const securityObserver = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.removedNodes.length) {
      mutation.removedNodes.forEach(node => {
        if (node.classList.contains('watermark')) {
          document.body.appendChild(node.cloneNode(true));
        }
      });
    }
  });
});

securityObserver.observe(document.body, {
  attributes: true,
  childList: true,
  subtree: true
});
  1. 多重防御机制
  • CSS防护层
.watermark-protect {
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none !important;
}
  • 事件拦截
document.addEventListener('contextmenu', e => e.preventDefault());
document.addEventListener('keydown', (e) => {
  if (e.ctrlKey && e.key === 's') e.preventDefault();
});

四、性能优化策略

优化手段实施方式效果提升
离屏Canvas使用Worker预生成水印图片40%~60%
CSS will-change对水印容器设置will-change: transform减少重绘
分层渲染使用requestAnimationFrame批量更新帧率稳定
按需渲染IntersectionObserver控制可见区域渲染内存降低
// 离屏Canvas示例
const offscreenCanvas = new OffscreenCanvas(300, 200);
const worker = new Worker('./watermark-worker.js');

worker.postMessage({
  canvas: offscreenCanvas,
  text: 'Secure Mark'
});

五、技术选型建议

  1. 普通业务场景：建议使用 DOM 方案，并结合 MutationObserver 进行防护。
  2. 安全敏感场景：采用 Canvas 动态生成水印，并与用户指纹绑定，增强安全性。
  3. 高清显示需求：选择 SVG 方案，并通过媒体查询进行适配，确保在不同设备上都能清晰显示。
  4. 移动端场景：可以使用 CSS 重复背景，并配置 touch-action，提升用户体验。

一个完整的水印系统应该包含版本管理、动态更新、埋点上报、异常监控等功能模块。同时，建议结合服务端实现水印信息的加密存储，以保证水印数据的不可篡改性。

通过web前端实现水印制作
m0_67394360的博客
03-07 685
快速使用 用 idea 打开 first.html，也就是起一个前端项目，直接打开会报跨域错误。 打开后，选择自己想查看的图片。这里以第二张图片甘雨为例，打开后会到达二级页面，二级页面包括了四张图片： 这四张图片以此表示了：原图、带明水印的图、数字水印、带暗水印的图。 点击最后一张图，会解析出明水印。 代码解析 二级界面文件夹下，有各个 html文件，一个css文件，一个 js 文件。 每个 html中都会链接到 css和 js 文件,html 中原本都只有一个 img 标签。css 文件没什么，就是规
前端实现视频播放添加水印
LuoHuaX的博客
07-19 807
前端实现视频播放添加水印
前端Vue添加水印功能
11-17
前端Vue添加水印功能
前端vue实现页面加水印文字 单个页面所有页面加水印
chenchuang0128的博客
06-07 1233
前端vue实现页面加水印文字, 可以实现系统所有页面加水印,也可以单个页面加水印, 可更改水印颜色, 下载完整代码请访问uni-app插件市场地址: https://ext.dcloud.net.cn/plugin?// 第一个参数:水印文字 第二个参数: 加水印的底图,默认body 给所有页面加水印, 第三个参数:水印颜色。// 第一个参数:水印文字 第二个参数: 加水印的底图,默认body 给所有页面加水印, 第三个参数:水印颜色。/* 给系统所有页面加水印*//* 给系统所有页面加水印*/
前端页面添加水印
nunumaymax的博客
06-01 549
为了防止信息泄露或知识产权被侵犯，在web的世界里，对于页面和图片等增加水印处理是十分有必要的。
前端实现简单防篡改的文字水印
最新发布
m0_56344834的博客
09-08 652
说到前端做水印吧，它其实更大的作用是做一个提示，告诉你这一块儿有版权，起到一个警示的作用和一个简单的防篡改；真正的要实现安全保护，往往都是技术手段和非技术手段双管齐下才能达到一个很好的效果。前端做水印最大的优点在于它成本低，只需要编译一个组件就完了，甚至在某一些组件库里本身就自带这个组件，像这个里边有个，用这个组件可以非常轻松的实现一个文字水印，不过遗憾的是在Vue的组件库里面是没有这个组件的，我们需要手动实现这个组件！
vue水印效果实现指南
希望看完文章的你能够带着答案离开
07-19 3881
vue水印效果实现指南
前端明水印到隐水印你了解了吗
qq_44197554的博客
01-23 5463
水印的目的是为了防止信息泄漏，保护版权，在很多网站里都有用到了水印，水印真的只是看到的这么简单吗？
通过web前端实现水印制作.zip
06-11
这四张图片以此表示了：原图、带明水印的图、数字水印、带暗水印的图。点击最后一张图，会解析出明水印。 详细介绍参考：https://biyezuopin.blog.youkuaiyun.com/article/details/122847801?spm=1001.2014.3001.5502
通过前端方法实现水印加密
weixin_45731450的博客
05-22 1076
为了防止信息泄露或知识产权被侵犯，在web的世界里，对于页面和图片等增加水印处理是十分有必要的，水印的添加根据环境可以分为两大类，前端浏览器环境添加和后端服务环境添加，简单对比一下这两种方式的特点： 前端浏览器加水印： 减轻服务端的压力，快速反应 安全系数较低，对于掌握一定前端知识的人来说可以通过各种骚操作跳过水印获取到源文件 适用场景：资源不跟某一个单独的用户绑定，而是一份资源，多个用户查看，需要在每一个用户查看的时候添加用户特有的水印，多用于某些机密文档或者展示机密信息的页面，水印的目的在于文档外流的
前端vue基于html2canva jspdf 实现前端页面加水印 并导出页面PDF
chenchuang0128的博客
05-31 4398
view class="exportPdfBtn" @click="downKcReport()">导出PDF//如果将水印列数设置为0，或水印列数设置过大，超过页面最大宽度，则重新计算水印列数和水印x轴间隔。watermark_fontsize: '14px', //水印字体大小。watermark_y_space: 102, //水印y轴间隔。watermark_x_space: 80, //水印x轴间隔。watermark_font: '微软雅黑', //水印字体。
前端添加水印
山岗下的星空的博客
03-28 2007
});// 使用方法 < div v - watermark = "'your watermark'" > 页面内容 < / div >${} });// 使用方法 < div v - watermark = "'your watermark'" > 页面内容 < / div >} });// 使用方法 < div v - watermark = "'your watermark'" > 页面内容 < / div >
页面水印添加工具【watermark-plus】，可防止手动删除水印，支持文本水印、图片水印、定制水印内容
知之为知之，不知为不知
12-24 5348
安全问题不能大意，对于一些比较敏感的内容，我们可以通过水印方案，最大程度地给浏览者警示的作用，减少泄密的情况，甚至泄密了，也有可能追踪到泄密者。 watermark-plus，使用简单，可防止手动删除水印；支持Vue、React等JS框架； 支持文本水印； 支持图片水印； 可防止被删除； 可防止重复渲染； 可动态适应超长水印文本； 高清晰度； 支持浏览器端打印； 可配置性强； 支持自定义水印内容（排版、样式、内容）；
tp-watermark.js网页添加水印插件
鹏仔工作室的秘密基地
08-13 4018
tp-watermark.js网页添加水印插件 作者：鹏仔先生 上周五，出差去改上个前端遗留的小问题，用到了watermark.js这个网站添加水印插件，功能很简单，就是给网页添加个水印，我看了下网上，有很多种，基本都是Canvas实现，我想要的是行与行之间交错效果，可是没有找到对应文档，看的烦的... 那就自己简单写个网页添加水印插件吧， tp-watermark.js 身为初级前端，写法比较low，但是功能很完善，请大家多多指导 下载插件：点击下载 DEMO...
前端小记————加水印
yshuoo的博客
03-07 1090
水印图片有外部接口提供，拿到的是base64编码的字符串。 前端可以直接引用这个字符串来显示图片： &lt;img border="0" src="data:images/JPG;base64,编码" alt=""&gt; &lt;img&gt; 标签在src中这样填写 想要把这个图片变成水印，就要将其设置成背景，在js函数中，直接和body绑定就可以了。 var imageSrc ...
H5 前端JS添加水印
new1818java的博客
10-15 3515
js添加图片水印 不好用你抽我、 如果需要后台（因为后台有个引包的问题）添加水印加Q931216004拿代码，给个关注呗~ <!DOCTYPE html> <html> <head> <title></title> <meta charset="UTF-8"/> <script src="test.js" ...
前端实现加水印
weixin_42342008的博客
04-08 3956
前端页面加水印 效果如图： 这要怎么实现呢？ 前端方案 通过canvas创建一张含有水印信息的背景图片，通过vue指令插入到页面中。 优点：方便快捷，易实现。 缺点： 容易被页面上的背景色以及背景图片遮挡 DOM元素直接遮盖、展示水印信息，覆盖在页面的最上层。 优点：对业务影响最小、不会被遮挡、配置更多、更灵活 缺点： 开发难度大、周期长 最终我们决定采用的是第二种方案 配置流程 项目中引入waterMark.js import Water
网页水印插件 --- gwm.js
Caroline_LuoLuo的博客
11-02 3417
用于内部系统生成水印，可提示信息安全与责任追踪 本文转自： https://github.com/loadchange/gwm 特性 支持生成 canvas、svg、element 三种类型水印 支持元素监控，防止篡改 可扩展性强 使用说明 1、引入js文件 &lt;script src="../js/gwm.js"&gt;&lt;/script&gt; 或者使用 npm 安装...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

懒羊羊我小弟

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值