html在线网页水印添加 html在线内容保护技术实现

爱谁谁

发布时间：2025-10-18 14:02:01

611人浏览过

来源于php中文网

原创

答案：通过JavaScript动态生成水印层、Canvas绘制背景水印、禁用右键与复制等手段，结合前端技术实现网页内容保护。1. 使用JS创建透明div覆盖页面，显示用户信息水印；2. 利用Canvas生成斜向文字base64图作为背景，增强防删性；3. 通过CSS和事件监听阻止文本选择与复制；4. 前端水印具威慑作用，需配合后端日志与权限控制用于文档预览等场景，提升盗用成本。

html在线网页水印添加 html在线内容保护技术实现

在网页内容保护中，添加水印是一种常见手段，用于防止未经授权的截图或复制行为。通过 HTML 与 CSS、JavaScript 配合，可以实现动态、透明的视觉水印，提升内容安全性。以下是几种实用的在线网页水印添加技术实现方式。

1. 使用 JavaScript 动态生成水印层

通过 JavaScript 在页面加载时动态插入一个半透明的水印层，覆盖在内容上方，既不影响阅读，又能起到标识作用。

创建一个全屏或局部覆盖的 div 元素，设置指定位文字（如用户ID、时间戳）
使用 CSS 将其设置为固定定位、低透明度、倾斜排列
通过 JS 将水印注入 DOM，防止直接通过审查元素轻易删除

示例代码：

function addWatermark(text) {
  const watermark = document.createElement('div');
  watermark.style.cssText = `
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-image: repeating-linear-gradient(
      45deg,
      transparent,
      transparent 20px,
      rgba(0,0,0,0.03) 20px,
      rgba(0,0,0,0.03) 40px
    );
    z-index: 99999;
    font-size: 14px;
    color: rgba(0,0,0,0.6);
    transform: rotate(-30deg);
    opacity: 0.1;
    user-select: none;
    pointer-events: none;
    background-size: 200px 200px;
    background-position: center center;
    z-index: 9999;
  `;
  watermark.setAttribute('data-watermark', text);
  document.body.appendChild(watermark);
}
// 调用
addWatermark('用户：test@example.com | 时间：2025-04-05');

2. 基于 Canvas 生成背景水印图

利用 Canvas 绘制文字并转换为 base64 图像，作为页面背景重复显示，更难被移除。

立即学习“前端免费学习笔记（深入）”；

在 Canvas 上绘制斜向排列的文字
导出为 data URL
设置为 body 或容器的 background-image

示例代码片段：

一点PPT

一句话生成专业PPT，AI自动排版配图

下载

function createCanvasWatermark(text) {
  const canvas = document.createElement('canvas');
  canvas.width = 200;
  canvas.height = 200;
  const ctx = canvas.getContext('2d');
  ctx.rotate(-Math.PI / 6);
  ctx.font = '14px Microsoft YaHei';
  ctx.fillStyle = 'rgba(0,0,0,0.1)';
  ctx.fillText(text, 20, 100);
  return canvas.toDataURL('image/png');
}

document.body.style.backgroundImage = `url(${createCanvasWatermark('版权所有')})`;

3. 防止复制与右键的辅助保护

结合水印，可增加基本的内容防复制机制，提升整体防护效果。

禁用右键菜单：contextmenu 事件阻止
阻止文本选择：user-select: none CSS 属性
监听复制事件：copy 事件中添加提示或拦截

示例：

// 禁止右键
document.addEventListener('contextmenu', e => e.preventDefault());

// 禁止选择
document.body.style.userSelect = 'none';

// 拦截复制
document.addEventListener('copy', e => {
  e.preventDefault();
  alert('内容受保护，禁止复制！');
});