前端JS使用canvas加水印（全屏、单图）

全屏阅读

基本信息

作者：mpxq168
作者已发布：973篇文章
发布时间：2026年01月29日 17:10:29
所属分类：javascript, WEB前端
阅读次数：25次阅读
评论次数：0次评论
标签：

一、图片加水印

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片水印示例</title>
<style>
    canvas {
        border: 1px solid black;
    }
</style>
</head>
<body>
    <canvas id="myCanvas" width="800" height="500"></canvas>
<script>
function addWatermark(imageUrl, text) {
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');
    const img = new Image();
    img.onload = function() {
        ctx.drawImage(img, 0, 0);
        ctx.font = '30px Arial';
        ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
        ctx.textAlign = 'center';
        ctx.fillText(text, canvas.width / 2, canvas.height / 2);
    };
    img.src = imageUrl;
  }
    // 使用示例
    addWatermark('./picture@2x.png', 'Your Watermark Text');
</script>
 
</body>
</html>

效果如下图

自动草稿

二、全屏水印

1. 创建一个Canvas元素

在HTML中创建一个<canvas>元素，或者通过JavaScript动态创建一个。这个Canvas元素将作为绘制水印的画布。

<canvas id="watermarkCanvas" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;"></canvas>

或者通过JavaScript动态创建：

const canvas = document.createElement('canvas');
canvas.id = 'watermarkCanvas';
canvas.style.position = 'absolute';
canvas.style.top = '0';
canvas.style.left = '0';
canvas.style.width = '100%';
canvas.style.height = '100%';
canvas.style.zIndex = '-1'; // 确保水印在背景层，不影响其他内容交互
document.body.appendChild(canvas);

2. 在Canvas上绘制满屏的水印文字或图案

使用js和Canvas的绘图API，在Canvas上绘制水印内容。这里以文字水印为例，你可以设置文字的字体、大小、颜色、透明度、旋转角度等属性，以实现满屏效果。

const canvas = document.getElementById('watermarkCanvas');
const ctx = canvas.getContext('2d');
 
// 设置Canvas尺寸与窗口一致
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
 
// 水印文字相关设置
const watermarkText = 'A2002012';
const fontSize = '24px';
const fontColor = 'rgba(184, 184, 184, 0.3)'; // 半透明灰色
const rotation = -20; // 旋转角度
 
// 绘制水印文字
for (let i = 0; i < canvas.width; i += 200) { // 控制水印的横向间距
    for (let j = 0; j < canvas.height; j += 100) { // 控制水印的纵向间距
        ctx.save();
        ctx.translate(i, j);
        ctx.rotate((Math.PI / 180) * rotation);
        ctx.font = fontSize + ' Arial';
        ctx.fillStyle = fontColor;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText(watermarkText, 0, 0);
        ctx.restore();
    }
}

效果如图：

自动草稿

3. 设置水印的透明度、颜色、字体等样式属性

在上面的代码中，已经设置了水印文字的字体大小（fontSize）、颜色（fontColor，使用RGBA格式可以设置透明度）、旋转角度（rotation）等属性。

4. 确保水印不影响Canvas上其他内容的显示和交互

我们将Canvas设置为绝对定位，并设置了较低的z-index值，因此水印将位于背景层，不会影响Canvas上其他内容的显示和交互。

同时，你可以通过CSS的pointer-events属性来确保水印层不响应鼠标事件：

#watermarkCanvas {
    pointer-events: none; /* 使水印层不响应鼠标事件 */
}

或者在JavaScript中动态设置：

canvas.style.pointerEvents = 'none';

. 优化水印的显示效果和性能

‌调整水印间距‌：通过调整绘制水印时的横向和纵向间距来控制水印的密度。

‌使用图片水印‌：除了文字水印外，你还可以使用图片作为水印。只需将图片绘制到Canvas上，并调整其大小和透明度即可。

‌监听窗口变化‌：当窗口大小发生变化时，重新绘制水印以保证其满屏效果。你可以使用window.onresize事件来监听窗口大小的变化。

window.onresize = function() {
    // 重新设置Canvas尺寸
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    
    // 清空Canvas并重新绘制水印
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // 重新绘制水印的代码（与上面相同）
};

顶一下

(0)

100%

订阅回复

踩一下

(0)

100%

» 固定链接：恒富网 » 《前端JS使用canvas加水印（全屏、单图）》

» 郑重声明：本文由mpxq168发布，所有内容仅代表个人观点。版权归恒富网和mpxq168共有，欢迎转载，但未经作者同意必须保留此段声明，并给出文章连接，否则保留追究法律责任的权利! 如果本文侵犯了您的权益，请留言。

恒富网