HTML5怎么实现水印功能_HTML5水印添加方法-html教程-PHP中文网

HTML5怎么实现水印功能_HTML5水印添加方法

看不見的法師

发布： 2025-10-22 08:15:02

原创

1036人浏览过

通过Canvas和JavaScript可在HTML5中实现水印功能，首先创建canvas绘制文字并转为base64图像，再将其设为页面背景或固定定位的透明图层，覆盖全屏且不影响交互，常用于提示和防泄漏。

html5怎么实现水印功能_html5水印添加方法

在HTML5中实现水印功能，主要是通过Canvas绘制文字或图片，并将其作为背景或叠加层显示在页面内容上。虽然HTML5本身没有直接提供“添加水印”的标签或API，但结合JavaScript和Canvas可以轻松实现这一效果。

使用Canvas绘制文字水印

最常见的方式是利用canvas绘制透明的文字水印并插入到页面中。

步骤如下：

创建一个canvas元素
设置画布的字体、颜色和透明度
用fillText方法绘制文字
将生成的base64图像设为某个容器的背景

示例代码：

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

<script>
function createWatermark(text) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
<p>canvas.width = 200;
canvas.height = 100;</p><p>// 设置水印样式
ctx.font = '20px Microsoft Yahei';
ctx.fillStyle = 'rgba(200, 200, 200, 0.3)';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.rotate(-Math.PI / 6); // 倾斜文字
ctx.fillText(text, 100, 50);</p><p>return canvas.toDataURL('image/png');
}
// 应用水印到页面
document.body.style.backgroundImage = <code>url(${createWatermark('内部文档')})</code>;
</script>

登录后复制

动态添加水印层覆盖页面

如果需要更明显的水印（如防止截图），可以通过JavaScript创建一个带水印的透明图层，覆盖在页面内容上方。

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

生成水印图像（同上）
创建一个div，设置其position: fixed
将水印图设为背景，并铺满整个视口
设置pointer-events: none，确保不影响用户操作

示例：

<script>
function addWatermark(text) {
  const watermark = document.createElement('div');
  const imgSrc = createWatermark(text);
<p>watermark.style.cssText = <code> position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url(${imgSrc}); z-index: 9999; pointer-events: none; opacity: 0.8; background-size: 200px 100px; background-repeat: repeat; </code>;</p><p>document.body.appendChild(watermark);
}</p><p>// 调用函数添加水印
addWatermark('机密文件 - 禁止外传');
</script>

登录后复制