前端水印实现方式

ops/2025/3/4 15:32:23/

一、简介

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

使用价值：

  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>`;// 编码为 base64const 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

jsx">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，提升用户体验。

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


http://www.ppmy.cn/ops/163073.html

相关文章

C#委托(delegate)的常用方式

C#委托(delegate)的常用方式

C# 中委托的常用方式&#xff0c;包括委托的定义、实例化、不同的赋值方式以及匿名委托的使用。 委托的定义 // 委托的核心是跟委托的函数结构一样 public delegate string SayHello(string c);public delegate string SayHello(string c);&#xff1a;定义了一个公共委托类型 …
阅读更多...
WPF创建DeepSeek本地自己的客户端-进阶版

WPF创建DeepSeek本地自己的客户端-进阶版

本次文章接上次写的“基础版”继续 WPF快速创建DeepSeek本地自己的客户端-基础思路版本 1 开发环境与工具 开发工具&#xff1a;VS 2015 开发环境&#xff1a;.Net 4.0 使用技术&#xff1a;WPF 本章内容&#xff1a;WPF实现一个进阶版的DeepSeek客户端。 效果图如下&#x…
阅读更多...
OpenCV计算摄影学（10）将一组不同曝光的图像合并成一张高动态范围（HDR）图像的实现类cv::MergeDebevec

OpenCV计算摄影学（10）将一组不同曝光的图像合并成一张高动态范围（HDR）图像的实现类cv::MergeDebevec

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 resulting HDR 图像被计算为考虑了曝光值和相机响应的各次曝光的加权平均值。 cv::MergeDebevec 是 OpenCV 中用于将一组不同曝光的图像合并成一…
阅读更多...
十一、Spring Boot：使用JWT实现用户认证深度解析

十一、Spring Boot：使用JWT实现用户认证深度解析

Spring Boot JWT&#xff08;JSON Web Token&#xff09;&#xff1a;无状态认证 在现代 Web 开发中&#xff0c;无状态认证是一种重要的安全机制&#xff0c;它允许服务器在不存储会话信息的情况下验证用户身份。JSON Web Token&#xff08;JWT&#xff09;是一种常用的无状态…
阅读更多...
RocketMQ定时/延时消息实现机制

RocketMQ定时/延时消息实现机制

RocketMQ 的延迟消息是其核心特性之一&#xff0c;允许消息在指定延迟时间后才被消费者消费。 定时消息生命周期 一、延迟消息的核心机制 RocketMQ&#xff08;5.0之前&#xff09; 不支持任意时间精度的延迟&#xff0c;而是通过预定义的 延迟级别&#xff08;Delay Level&a…
阅读更多...
本地部署 DeepSeek-R1大模型详细教程(桌面客户端美观UI)

本地部署 DeepSeek-R1大模型详细教程(桌面客户端美观UI)

大家好&#xff01;今天我来分享一篇超级详细的教程&#xff0c;教你如何在本地部署 DeepSeek-R1 大模型&#xff0c;让你的电脑也能成为一个强大的 AI 工作站&#xff01;这篇文章会从零开始&#xff0c;手把手带你完成所有步骤&#xff0c;适合小白操作。废话不多说&#xff…
阅读更多...
什么是kube-proxy？

什么是kube-proxy？

kube-proxy是Kubernetes集群中一个关键的组件&#xff0c;主要负责实现Kubernetes服务&#xff08;Service&#xff09;的网络代理和负载均衡功能。 基本概念 kube-proxy是一个运行在每个Kubernetes节点上的守护进程。它监听KubernetesAPI服务器中关于服务&#xff08;Service…
阅读更多...
SEKI —— 基于大型语言模型的自进化与知识启发式神经架构搜索

SEKI —— 基于大型语言模型的自进化与知识启发式神经架构搜索

01、项目概述 我们引入了一种基于新型大型语言模型&#xff08; LLM &#xff09;的神经架构搜索&#xff08; NAS &#xff09;方法&#xff0c;名为 SEKI 。SEKI 受到现代 LLM 中思维链&#xff08; CoT &#xff09;范式的启发&#xff0c;分为两个关键阶段运行&#xff1a…
阅读更多...
最新文章

Copyright @ 2022~2023