端功能问题系列文章，点击上方合集↑

序言

大家好，我是大澈！

本文约3100+字，整篇阅读大约需要5分钟。

本文主要内容分三部分，如果您只需要解决问题，请阅读第一、二部分即可。如果您有更多时间，进一步学习问题相关知识点，请阅读至第三部分。

感谢关注微信公众号：“程序员大澈”，然后加入问答群，从此让解决问题的你不再孤单！

着互联网的普及和发展，前端页面水印技术也得到了广泛的应用。在数字化时代，水印技术已成为保护知识产权和防止伪造的重要手段之一。本文将介绍前端页面水印的基本原理、技术方法和实际应用，并提供一个基于HTML5和JavaScript的简单水印实现。

一、基本原理

水印（Watermark）是指在某些特定材质或图像中隐藏信息，这些信息在普通观察下不易被发现，但在特殊条件下会显现出来。在前端页面中，水印技术主要应用于图像、文字、视频等多媒体内容，通过修改内容的某些属性，以达到防止伪造和保护知识产权的目的。

二、技术方法

图像水印

图像水印是指在图像中隐藏信息，可以在不破坏图像原始内容的情况下实现。常见的技术包括频域滤波、小波变换、分形等。实现图像水印需要具备一定的数字图像处理知识。

文字水印

文字水印是指在文本中隐藏信息。可以通过修改字体、颜色、透明度等属性来实现。在HTML中，可以使用CSS样式和JavaScript来修改文字属性，实现文字水印。

视频水印

视频水印是指在视频流中隐藏信息。与图像水印类似，视频水印也需要数字图像处理技术的支持。实现视频水印需要对视频编解码技术有一定的了解。

三、实际应用

版权保护

在数字图像和视频的传输过程中，可能会发生侵权行为。通过在原始内容中添加水印，可以在发生版权纠纷时证明版权归属。

防伪造

利用水印技术可以防止伪造货币、证件等重要文件。在制作文件时，将特定信息添加到文件中，可以在验证文件真伪时提供有力证据。

票据防伪

在金融、税务等领域，电子票据的防伪问题一直是行业痛点。通过在票据中添加水印，可以有效防止伪造票据。

四、基于HTML5和JavaScript的水印实现

下面是一个基于HTML5和JavaScript的简单水印实现：

准备一张带有水印的图片（watermark.png），设置透明度并放置在页面中。

在CSS中定义水印样式：

css

.watermark {

position: fixed;

left: 0;

top: 0;

opacity: 0.5;

}

在HTML中添加以下代码：

html

<img src="watermark.png" class="watermark">

在JavaScript中，可以通过修改图片的透明度来实现动态水印效果：

javascript

function setWatermarkOpacity(opacity) {

var watermark = document.querySelector('.watermark');

watermark.style.opacity = opacity;

}

// 设置初始透明度为0.5

setWatermarkOpacity(0.5);

通过以上代码，即可在前端页面中实现简单的动态水印效果。需要注意的是，该方法仅适用于静态内容，对于动态内容和交互式内容，需要采用更复杂的技术来实现水印效果。

Vue3中，为页面添加水印通常涉及到自定义组件和CSS样式的使用。水印可以是文本、图像或者半透明的背景层，用于标识内容版权或所有权。下面我们将探讨几种在Vue3页面上添加水印的方法。

方法一：使用CSS伪元素

最简单的方法之一是使用CSS的伪元素（::after）来在页面上添加水印。这种方法不需要额外的DOM元素，仅通过CSS样式即可实现。

<template>  
  <div class="watermarked-page">  
    <!-- 页面内容 -->  
  </div>  
</template>  
  
<style scoped>  
.watermarked-page {  
  position: relative;  
}  
  
.watermarked-page::after {  
  content: "水印文字或标识";  
  position: absolute;  
  bottom: 10px;  
  right: 10px;  
  font-size: 24px;  
  color: rgba(0, 0, 0, 0.3); /* 半透明效果 */  
  z-index: 1;  
}  
</style>

方法二：使用自定义Vue组件

如果需要更复杂的控制，可以创建一个自定义的Vue组件，将水印作为组件的一部分。

<template>  
  <div class="watermarked-content">  
    <slot></slot> <!-- 插槽，用于插入页面内容 -->  
    <div class="watermark">  
      <img src="watermark-image.png" alt="Watermark" />  
    </div>  
  </div>  
</template>  
  
<style scoped>  
.watermarked-content {  
  position: relative;  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  justify-content: center;  
}  
  
.watermark {  
  position: absolute;  
  bottom: 10px;  
  right: 10px;  
  z-index: 1;  
}  
  
.watermark img {  
  width: 100px; /* 根据需要调整水印图片的大小 */  
  height: auto;  
}  
</style>  
  
<script>  
export default {  
  name: 'Watermark',  
};  
</script>

然后在需要添加水印的页面中使用这个组件：

<template>  
  <div>  
    <Watermark>  
      <!-- 页面内容 -->  
    </Watermark>  
  </div>  
</template>  
  
<script>  
import Watermark from './Watermark.vue';  
  
export default {  
  components: {  
    Watermark,  
  },  
};  
</script>

方法三：使用Canvas绘制水印

对于更高级的水印需求，比如需要动态生成水印或者使用图像作为水印，可以使用Canvas API来绘制水印。

<template>  
  <div ref="watermarkContainer" class="watermarked-page">  
    <!-- 页面内容 -->  
  </div>  
</template>  
  
<script>  
export default {  
  mounted() {  
    this.addWatermark();  
  },  
  methods: {  
    addWatermark() {  
      const container = this.$refs.watermarkContainer;  
      const canvas = document.createElement('canvas');  
      const ctx = canvas.getContext('2d');  
  
      // 设置canvas尺寸与容器相同  
      canvas.width = container.offsetWidth;  
      canvas.height = container.offsetHeight;  
  
      // 绘制水印  
      ctx.font = '30px Arial';  
      ctx.fillStyle = 'rgba(0, 0, 0, 0.3)';  
      ctx.fillText('水印文字', 10, 50);  
  
      // 将canvas添加到容器中  
      container.appendChild(canvas);  
    }  
  }  
};  
</script>  
  
<style scoped>  
.watermarked-page {  
  position: relative;  
}  
</style>

注意事项

• 性能考虑：如果水印需要覆盖整个页面，请确保水印的添加不会显著影响页面的渲染性能。
• 用户体验：水印不应该干扰用户正常使用页面，也不应该过于显眼。
• 版权问题：在添加水印时，请确保您有权使用水印内容，并且遵守相关的版权法律法规。

选择哪种方法取决于您的具体需求，比如水印的复杂性、是否需要动态生成、对性能的影响等因素。简单的文本水印或标识通常可以使用CSS伪元素或自定义组件实现；而更复杂的需求可能需要使用Canvas API来绘制。