当前位置： 首页 > article >正文

网页常见水印实现方式

article 2025/9/22 19:28:33

文章目录

    • 1 明水印技术实现
      • 1.1 DOM覆盖方案
      • 1.2 Canvas动态渲染
      • 1.3 CSS伪元素方案
    • 2 暗水印技术解析
      • 2.1 空域LSB算法
      • 2.2 频域傅里叶变换
    • 3 防篡改机制设计
      • 3.1 MutationObserver防护
      • 3.2 Canvas指纹追踪
      • 4 前后端实现对比
    • 5 攻防博弈深度分析
      • 5.1 常见破解手段
      • 5.2 进阶防御策略
    • 6 选型

近期文章：

  • Node.js中那些常用的进程通信方式
  • 浅谈微前端沙箱机制
  • 实现篇：手把手打造一个番茄时钟
  • Vue3响应式原理那些事
  • 实现篇：二叉树遍历收藏版
  • 实现篇：LRU算法的几种实现
  • 从底层视角看requestAnimationFrame的性能增强
  • Nginx Upstream了解一下
  • 实现篇：一文搞懂Promise是如何实现的
  • 一文搞懂 Markdown 文档规则

在数字化时代，网页水印已成为版权保护、信息溯源的核心技术。今天就从明暗水印原理、前后端实现方案、防篡改机制等维度展开解析，结合主流技术实现代码，探讨水印技术的攻防博弈与最佳实践。

1 明水印技术实现

1.1 DOM覆盖方案

sTK37U7G_WX20250513-172616@2x.png

通过创建绝对定位的DOM元素覆盖目标区域，利用CSS层级(z-index)和透明度(opacity)控制视觉呈现。此方案支持动态文本注入和样式定制，但存在性能消耗和易篡改的缺陷。

示例代码

<!doctype html>
<html><head><title>水印测试</title><style>body{height: 100%;}</style></head><body><script>function createDOMWatermark(opt) {const watermark = document.createElement('div');watermark.style.position = 'fixed';watermark.style.top = '0';watermark.style.left = '0';watermark.style.width = '100%';watermark.style.height = '100%';watermark.style.zIndex = '9999999';watermark.style.userSelect = 'none';watermark.style.pointerEvents = 'none';watermark.style.background = `repeating-linear-gradient(-${opt.rotate || 45}deg, rgba(0,0,0,0.1), rgba(0,0,0,0.1) 20px, transparent 20px, transparent 40px)`;watermark.innerHTML = `<div style="transform: rotate(-30deg) translate(-50%, -50%);color: ${opt.color || '#333'};font-size: ${opt.fontSize || '24px'};position: absolute;opacity:

相关文章：

网页常见水印实现方式

文章目录 1 明水印技术实现1.1 DOM覆盖方案1.2 Canvas动态渲染1.3 CSS伪元素方案2 暗水印技术解析2.1 空域LSB算法2.2 频域傅里叶变换3 防篡改机制设计3.1 MutationObserver防护3.2 Canvas指纹追踪4 前后端实现对比5 攻防博弈深度分析5.1 常见破解手段5.2 进阶防御策略6 选型近…...

编程日记 2025/9/20 1:22:06

oracle主备切换参考

主备正常切换操作参考&#xff1a;RAC两节点->单机 &#xff08;rac和单机的操作区别&#xff1a;就是关闭其它节点&#xff0c;剩一个节点操作即可&#xff09; 1.主库准备 检查状态 SQL> select inst_id,database_role,OPEN_MODE from gv$database; INST_ID DATA…...

编程日记 2025/8/19 22:10:03

Java大师成长计划之第25天：Spring生态与微服务架构之容错与断路器模式

&#x1f4e2; 友情提示&#xff1a; 本文由银河易创AI&#xff08;https://ai.eaigx.com&#xff09;平台gpt-4-turbo模型辅助创作完成&#xff0c;旨在提供灵感参考与技术分享&#xff0c;文中关键数据、代码与结论建议通过官方渠道验证。 在微服务架构中&#xff0c;系统通常…...

编程日记 2025/7/17 3:11:31

【ARM】MDK如何将变量存储到指定内存地址

1、 文档目标 在嵌入式系统开发中&#xff0c;通过MDK&#xff08;Microcontroller Development Kit&#xff09;进行工程配置&#xff0c;将指定的变量存储到指定的内存地址上是一项非常重要的技术。这项操作不仅能够满足特定硬件架构的需求&#xff0c;还能优化系统的性能和…...

编程日记 2025/9/19 14:11:36

Unity3D仿星露谷物语开发44之收集农作物

1、目标 在土地中挖掘后&#xff0c;洒下种子后逐渐成长&#xff0c;然后使用篮子收集成熟后的农作物&#xff0c;工具栏中也会相应地增加该农作物。 2、修改CropStandard的参数 Assets -> Prefabs -> Crop下的CropStandard&#xff0c;修改其Box Collider 2D的Size(Y…...

编程日记 2025/9/20 1:21:55

langchain—chatchat

署部 下载项目 git clone --recursive https://github.com/chatchat-space/Langchain-Chatchat.git 进入目录 cd Langchain-Chatchat anaconda环境准备 创建python环境 conda create -n langchain_env python3.10 -y 激活环境 conda activate langchain_env 验证pyhton环境…...

编程日记 2025/9/20 1:21:50

经典算法 求C(N, K) % mod，保证mod是质数

求C(N, K) % mod&#xff0c;保证mod是质数 问题描述 给你三个整数N,K,mod保证mod是一个质数&#xff0c;求组合数C(N, K) % mod。 输入描述 输入有多组&#xff0c;输入第一行为两个整数T&#xff0c;mod。接下来2 - T 1行&#xff0c;每行输入N&#xff0c; K。 输出描…...

编程日记 2025/6/10 7:54:32

【LeetCode 热题 100】二叉树的最大深度 / 翻转二叉树 / 二叉树的直径 / 验证二叉搜索树

⭐️个人主页&#xff1a;小羊 ⭐️所属专栏&#xff1a;LeetCode 热题 100 很荣幸您能阅读我的文章&#xff0c;诚请评论指点&#xff0c;欢迎欢迎 ~ 目录 二叉树的中序遍历二叉树的最大深度翻转二叉树对称二叉树二叉树的直径二叉树的层序遍历将有序数组转换为二叉搜索树验…...

编程日记 2025/9/20 1:21:44

关于软件测试开发的一些有趣的知识

文章目录 一、什么是测试&#xff1f;二、为什么要软件测试软件测试三、测试的岗位有哪些四 、软件测试和开发的区别五、走测试岗位为什么还要学开发。4、优秀的测试人员具备的素质我为什么走测试岗位 一、什么是测试&#xff1f; 其实这个问题说简单也不简单&#xff0c;说难…...

编程日记 2025/9/20 1:21:38

uni-app 开发HarmonyOS的鸿蒙影视项目分享：从实战案例到开源后台

最近&#xff0c;HBuilderX 新版本发布&#xff0c;带来了令人兴奋的消息——uni-app 现在支持 Harmony Next 平台的 App 开发。这对于开发者来说无疑是一个巨大的福音&#xff0c;意味着使用熟悉的 Vue 3 语法和开发框架&#xff0c;就可以为鸿蒙生态贡献自己的力量。 前言 作…...

编程日记 2025/9/20 1:21:32

售前工作.工作流程和工具

第一部分 售前解决方案及技术建议书的制作 售前解决方案编写的标准操作步骤SOP: 售前解决方案写作方法_哔哩哔哩_bilibili 第二部分 投标过程关键活动--商务标技术方案 1. 按项目管理--售前销售项目立项 销售活动和销售线索的跟踪流程和工具 1&#xff09;拿到标书&#xff…...

编程日记 2025/9/20 1:21:09

GPU与NPU异构计算任务划分算法研究：基于强化学习的Transformer负载均衡实践

点击 “AladdinEdu&#xff0c;同学们用得起的【H卡】算力平台”&#xff0c;H卡级别算力&#xff0c;按量计费&#xff0c;灵活弹性&#xff0c;顶级配置&#xff0c;学生专属优惠。 引言 在边缘计算与AI推理场景中&#xff0c;GPU-NPU异构计算架构已成为突破算力瓶颈的关键技…...

编程日记 2025/9/20 1:21:05

学习ai课程大纲

以下是一个通用的 AI 课程大纲&#xff0c;涵盖从基础到进阶的核心内容&#xff0c;适用于大学课程或自学规划。你可以根据自身需求&#xff08;如入门、进阶、专项方向&#xff09;调整内容和深度。 人工智能&#xff08;AI&#xff09;课程大纲 第一部分&#xff1a;基础理论…...

编程日记 2025/7/24 23:40:08

基于CentOS7制作OpenSSL 1.1的RPM包

背景&#xff1a;CentOS7 已经不再维护了&#xff0c;有时候需要升级某些组件&#xff0c;网上却没有相关的资源了。尤其是制作OpenSSH 9.6 的RPM包&#xff0c;就会要求OpenSSL为1.1的版本。基于此&#xff0c;还是自己制作吧&#xff0c;以下是踩坑过程。 1、官网提供的源码包…...

编程日记 2025/6/8 3:40:01

数据分析_Python

1 分析内容 1.1 数据的整体概述 提供数据集的基本信息,包括数据量、时间跨度、地理范围和主要字段. import pandas as pd# 创建示例数据 data {姓名: [张三, 李四, 王五, 赵六, 钱七, 孙八, 周九, 吴十],年龄: [25, 30, 35, 40, 45, 50, 55, 60],性别: [男, 男, 女, 女, 男,…...

编程日记 2025/6/27 7:49:23

TCP/UDP协议原理和区别 笔记

从简单到难吧 区别就是TCP一般用于安全稳定的需求&#xff0c;UDP一般用于不那么需要完全数据的需求&#xff0c;比如说直播&#xff0c;视频等。 再然后就是TPC性能慢于UDP。 再然后我们看TCP的原理&#xff08;三次握手&#xff0c;数据传输&#xff0c;四次挥手&#xff0…...

编程日记 2025/8/4 0:17:42

深入浅出：C++数据处理类与计算机网络的巧妙类比

深入浅出&#xff1a;C数据处理类与计算机网络的巧妙类比 引言 在计算机编程中&#xff0c;我们常常会遇到一些看似简单的代码结构&#xff0c;却能巧妙地映射到复杂的计算机网络概念中。本文将通过一个简单的C数据处理类&#xff0c;探讨其与计算机网络中硬件设备和协议的类…...

编程日记 2025/8/9 23:10:10

【滑动窗口】LeetCode 209题解 | 长度最小的子数组

长度最小的子数组 前言&#xff1a;滑动窗口一、题目链接二、题目三、算法原理解法一&#xff1a;暴力枚举解法二&#xff1a;利用单调性&#xff0c;用滑动窗口解决问题那么怎么用滑动窗口解决问题&#xff1f;分析滑动窗口的时间复杂度 四、编写代码 前言&#xff1a;滑动窗口…...

编程日记 2025/9/20 1:21:00

在RK3588上使用NCNN和Vulkan加速ResNet50推理全流程

在RK3588上使用NCNN和Vulkan加速ResNet50推理全流程 前言：为什么需要关注移动端AI推理一、环境准备与框架编译1.1 获取NCNN源码1.2 安装必要依赖1.3 编译NCNN二、模型导出与转换2.1 生成ONNX模型2.2 转换NCNN格式三、模型量化加速3.1 生成校准数据3.2 执行量化操作四、性能测试…...

编程日记 2025/9/19 13:24:47

【ant design】ant-design-vue 4.0实现主题色切换

官网&#xff1a;Ant Design Vue — An enterprise-class UI components based on Ant Design and Vue.js 我图方便&#xff0c;直接在 app.vue 中加入的 <div class"app-content" v-bind:class"appOption.appContentClass"><a-config-provider…...

编程日记 2025/9/13 19:58:13

Android 图片自动拉伸不变形，点九

要让 UI 设计师 制作 Android 用的点九图&#xff08;.9.png&#xff09;&#xff0c;可以按照以下流程和要求进行&#xff1a; &#x1f9e9; 一、什么是点九图&#xff1f; 点九图&#xff08;NinePatch&#xff09;是一种特殊的 PNG 图像&#xff0c;用于在 Android 中根据…...

编程日记 2025/7/7 22:34:58

电子电路：什么是色环电阻器，怎么识别和计算阻值？

识别和计算色环电阻的阻值需要掌握颜色编码规则和基本步骤。以下是具体方法及窍门： 一、色环电阻的基本规则 色环数量： 4环电阻：前2环为有效数字，第3环为倍乘（10ⁿ），第4环为误差。5环电阻：前3环为有效数字，第4环为倍乘，第5环为误差。6环电阻（较少见）：前3环为有效数…...

编程日记 2025/8/10 20:02:00

LeetCode Hot100刷题——轮转数组

56. 轮转数组 给定一个整数数组 nums&#xff0c;将数组中的元素向右轮转 k 个位置&#xff0c;其中 k 是非负数。 示例 1: 输入: nums [1,2,3,4,5,6,7], k 3 输出: [5,6,7,1,2,3,4] 解释: 向右轮转 1 步: [7,1,2,3,4,5,6] 向右轮转 2 步: [6,7,1,2,3,4,5] 向右轮转 3 步: …...

编程日记 2025/9/15 2:47:44

Python绘制南丁格尔玫瑰图：从入门到实战

Python绘制南丁格尔玫瑰图&#xff1a;从入门到实战 引言 南丁格尔玫瑰图&#xff08;Nightingale Rose Chart&#xff09;&#xff0c;也被称为极区图&#xff08;Polar Area Chart&#xff09;&#xff0c;是一种独特的数据可视化方式。这种图表由弗洛伦斯南丁格尔&#xff…...

编程日记 2025/9/20 1:20:55

概率与期望总结

一、概率 概念&#xff1a;无需多言&#xff1b;几个公式&#xff08; Ω \Omega Ω 表示整个样本空间&#xff09;&#xff1a; 以下公式均有 A , B ⊆ Ω , 且 P ( A ) , P ( B ) > 0. P ( A ∪ B ) P ( A ) P ( B ) − P ( A ∩ B ) , P ( A ∣ B ) P ( A B ) P ( B…...

编程日记 2025/8/7 23:43:27

炼丹学习笔记3---ubuntu2004部署运行openpcdet记录

前言 环境 cuda 11.3 python 3.8 ubuntu2004 一、cuda环境检测 ylhy:~/code_ws/OpenPCDet/tools$ nvcc -V nvcc: NVIDIA (R) Cuda compiler driver Copyright (c) 2005-2021 NVIDIA Corporation Built on Sun_Mar_21_19:15:46_PDT_2021 Cuda compilation tools, release 11.3…...

编程日记 2025/9/20 15:08:55

深入解析BGP路由反射器与联邦：突破IBGP全连接限制的两种方案

一、引言&#xff1a;大型BGP网络的挑战 在大型BGP网络架构中&#xff0c;传统的IBGP全连接架构会带来严重的扩展性问题。当网络中存在N台路由器时&#xff0c;需要维护N*(N-1)/2个IBGP连接&#xff0c;这对设备资源和运维管理都是巨大挑战。本文将深入解析两种主流解决方案&a…...

编程日记 2025/9/5 0:14:37

QT设置MySQL驱动

QSqlDatabase: QMYSQL driver not loaded QSqlDatabase: available drivers: QSQLITE QMYSQL QMYSQL3 QODBC QODBC3 QPSQL QPSQL7 第一步&#xff1a;下载MySQL https://dev.mysql.com/downloads/mysql/ 解压缩下载的安装包&#xff0c;其目录结构如下所示&#xff1a; 第二…...

编程日记 2025/9/17 15:13:13

String的一些固定程序函数

append reverse length toString...

编程日记 2025/9/20 21:16:13

3.2/Q2，Charls最新文章解读

文章题目&#xff1a;Transition of nighttime sleep duration and sleep quality with incident cardiovascular disease among middle-aged and older adults: results from a national cohort study DOI&#xff1a;10.1186/s13690-025-01577-5 中文标题&#xff1a;中老年人…...

编程日记 2025/9/5 0:20:54