登录
首页 >  文章 >  前端

JavaScript添加水印的几种实现方式

时间：2025-08-17 10:39:26 410浏览 收藏

最近发现不少小伙伴都对文章很感兴趣，所以今天继续给大家介绍文章相关的知识，本文《JavaScript实现水印效果的几种方法》主要内容涉及到等等知识点，希望能帮到你！当然如果阅读本文时存在不同想法，可以在评论中表达，但是请勿使用过激的措辞~

前端实现水印的核心是使用Canvas生成动态、个性化水印；1. 创建离屏Canvas并绘制文字或图片内容；2. 通过toDataURL将Canvas转为图片URL；3. 将该URL设为页面背景并平铺；4. 使用ResizeObserver或resize事件实现响应式适配；5. 利用MutationObserver或Shadow DOM增加移除难度；6. 支持图片水印，通过drawImage绘制并控制透明度、大小和旋转，最终实现难以篡改且视觉协调的全页水印效果。

js怎样实现水印效果

在前端实现水印效果，核心思路往往离不开利用CSS的背景图片特性，或是更强大、灵活的HTML5 Canvas。我个人经验是，如果只是简单的静态水印，CSS足够了；但如果需要动态生成、适应内容、甚至带有用户信息的个性化水印，Canvas绝对是首选，它能让你把文字或图片“画”上去，然后把这个“画”好的内容作为背景应用到任何元素上。

js怎样实现水印效果

解决方案

说起在前端搞水印，我个人觉得，最靠谱的办法还是得请出Canvas。它能让我们像画师一样，把水印内容（无论是文字还是图片）先“画”在一张透明画布上，再把这张画布变成一张图片，最后把这张图片当成背景平铺到页面上。这种方式灵活度很高，而且不容易被直接审查元素找到原始文字。

具体怎么做呢？我们一步步来：

js怎样实现水印效果

  1. 创建离屏Canvas： 不需要把Canvas元素添加到DOM里，我们只是用它来生成图片。

    const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

  2. 设置Canvas尺寸与内容： 这里的尺寸不是最终水印的尺寸，而是单个重复单元的尺寸。你需要根据水印文字的长度、字体大小以及希望的间距来决定。我通常会留出一些冗余空间，让水印看起来不那么拥挤。

    js怎样实现水印效果
    const text = '我的专属水印 © 2024'; // 你想要的水印文字
const fontSize = 20;
const textColor = 'rgba(0, 0, 0, 0.1)'; // 半透明，不影响内容阅读
const rotation = -20 * Math.PI / 180; // 倾斜角度，这里是-20度

canvas.width = 300; // 单个水印单元的宽度
canvas.height = 200; // 单个水印单元的高度

ctx.font = `${fontSize}px Arial`;
ctx.fillStyle = textColor;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';

// 旋转画布，让水印文字倾斜
ctx.translate(canvas.width / 2, canvas.height / 2); // 移动到中心
ctx.rotate(rotation);
ctx.fillText(text, 0, 0); // 在中心绘制文字
ctx.rotate(-rotation); // 旋转回来
ctx.translate(-canvas.width / 2, -canvas.height / 2); // 移回原点

  3. 将Canvas内容转换为图片URL： 这就是Canvas的厉害之处，它可以直接导出Base64编码的图片数据。

    const dataURL = canvas.toDataURL('image/png'); // 或者'image/jpeg'，PNG支持透明度

  4. 应用为背景： 最后，把这个生成的图片URL应用到你想要加水印的元素上。通常是body或者某个特定的内容容器。

    const targetElement = document.body; // 目标元素，可以是document.body或某个div
targetElement.style.backgroundImage = `url(${dataURL})`;
targetElement.style.backgroundRepeat = 'repeat'; // 让水印平铺
targetElement.style.backgroundSize = `${canvas.width}px ${canvas.height}px`; // 根据Canvas尺寸设置背景大小
targetElement.style.pointerEvents = 'none'; // 确保水印不会干扰鼠标事件
targetElement.style.position = 'fixed'; // 如果是body，确保它覆盖整个视口
targetElement.style.top = '0';
targetElement.style.left = '0';
targetElement.style.width = '100%';
targetElement.style.height = '100%';
targetElement.style.zIndex = '9999'; // 确保在最上层，但又通过pointer-events不影响点击

你可以把上面这些代码封装成一个函数，比如 createWatermark(text, options)，这样用起来会更方便。

水印如何适应不同屏幕尺寸或容器变化？

这是一个很实际的问题。单纯地把水印图片贴上去，如果页面布局或屏幕尺寸变了，水印可能会显得稀疏或过密。在我看来，处理这种动态适应性，主要有几个点：

一种是监听窗口resize事件。当浏览器窗口大小改变时，重新计算Canvas的尺寸和水印的布局，然后重新生成并应用水印。这虽然会带来一点点性能开销，但在大多数场景下是可接受的。

function applyWatermark() {
    // ... 上面生成水印的代码 ...
    // targetElement.style.backgroundImage = `url(${dataURL})`;
    // ...
}

window.addEventListener('resize', () => {
    // 可以在这里加个节流（throttle）或者防抖（debounce）
    // 避免在用户拖拽窗口时频繁触发
    applyWatermark();
});

// 页面加载完成也调用一次
document.addEventListener('DOMContentLoaded', applyWatermark);

另一种更高级、也更精准的办法是使用ResizeObserver。这个API专门用来监听DOM元素的尺寸变化，比监听window.resize更精确，因为它只关注你目标元素的变化。如果你只想在某个特定容器内加水印，并且这个容器的大小会动态变化，ResizeObserver就是你的好帮手。

const myContainer = document.getElementById('my-content-area'); // 假设你要给这个div加水印

const resizeObserver = new ResizeObserver(entries => {
    for (let entry of entries) {
        if (entry.target === myContainer) {
            // 当myContainer尺寸变化时，重新生成并应用水印
            // 你可能需要根据entry.contentRect.width和height来调整Canvas的尺寸和水印布局
            applyWatermarkToContainer(myContainer, entry.contentRect.width, entry.contentRect.height);
        }
    }
});

resizeObserver.observe(myContainer); // 开始观察这个容器

当然，在重新生成水印时，你可能需要根据新的容器尺寸，动态调整Canvas的width和height，甚至调整水印文字的字体大小或重复间隔，以确保水印密度和视觉效果始终保持一致。

如何防止水印被用户轻易移除？

说实话，前端的水印，终究是运行在用户浏览器里的东西，从技术上讲，只要用户有心，总能找到办法移除。毕竟，他拥有浏览器的完全控制权。但我们可以增加移除的难度，让那些“顺手牵羊”的人觉得麻烦。

一个非常基础但有效的方法是，把水印元素设置为pointer-events: none;。这样用户就无法通过鼠标点击来选中它，或者通过F12开发者工具来直接定位它。它就好像一层透明的薄膜，虽然存在，但“摸不着”。

更进一步，我们可以利用MutationObserver来“反侦察”。这个API可以监听DOM树的变化，比如元素的增删、属性修改。我们可以用它来监测水印元素是否被删除了，或者它的样式（比如display: none;）是否被修改了。一旦发现异常，立即重新生成并应用水印。

function createAndObserveWatermark() {
    // ... 上面生成并应用水印的代码 ...
    // 假设水印元素是watermarkDiv

    const observer = new MutationObserver((mutationsList) => {
        for (const mutation of mutationsList) {
            if (mutation.type === 'childList' && Array.from(mutation.removedNodes).includes(watermarkDiv)) {
                // 水印元素被移除了
                console.warn('水印被移除，正在重新生成...');
                createAndObserveWatermark(); // 重新生成并观察
                return;
            }
            if (mutation.type === 'attributes' && mutation.target === watermarkDiv) {
                // 水印元素的属性被修改了 (比如display: none)
                console.warn('水印样式被修改，正在重新应用...');
                // 强制恢复样式，或者重新生成
                watermarkDiv.style.display = 'block'; // 举例，实际可能更复杂
                watermarkDiv.style.opacity = '1';
                // 更好的做法是重新调用生成函数
                createAndObserveWatermark();
                return;
            }
        }
    });

    // 观察document.body的子节点变化和水印元素的属性变化
    observer.observe(document.body, { childList: true, subtree: true });
    observer.observe(watermarkDiv, { attributes: true });
}

createAndObserveWatermark();

当然，你也可以把水印放在Shadow DOM里。Shadow DOM是一种封装技术，它可以把DOM子树和样式封装起来，与主文档的DOM分离。虽然不是绝对安全，但它能让水印元素在主文档的开发者工具中更难被发现和修改，因为你需要专门切换到Shadow DOM视图才能看到它。

const hostElement = document.getElementById('watermark-host'); // 一个普通的div
const shadowRoot = hostElement.attachShadow({ mode: 'open' }); // 创建Shadow DOM

// 在这里，你可以把上面生成水印的Canvas图片，通过CSS应用到shadowRoot内部的一个元素上
// 例如：
const watermarkDivInShadow = document.createElement('div');
watermarkDivInShadow.style.cssText = `
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    pointer-events: none;
    background-image: url(${dataURL}); /* dataURL来自Canvas生成 */
    background-repeat: repeat;
    background-size: ${canvas.width}px ${canvas.height}px;
`;
shadowRoot.appendChild(watermarkDivInShadow);

总的来说，前端水印更多是一种“君子协定”和“增加门槛”的手段。真要百分百防盗，那得在图片或内容从服务器端传输时就加上水印，或者通过更复杂的加密和验证机制。

除了文字，水印能用图片吗？

当然可以！Canvas的强大之处就在于它不仅能画文字，也能画图片。思路和文字水印非常相似，只是把fillText换成了drawImage。

具体操作：

  1. 加载图片： 你需要先创建一个Image对象，并设置它的src。确保图片加载完成后再进行绘制。

    const img = new Image();
img.src = 'path/to/your/watermark-icon.png'; // 你的水印图片路径
img.onload = () => {
    // 图片加载完成后才能绘制
    drawWatermarkImage(img);
};
img.onerror = () => {
    console.error('水印图片加载失败！');
};

  2. 在Canvas上绘制图片： 在img.onload回调函数里，执行Canvas的绘制逻辑。你可以根据需要调整图片的大小、透明度、位置和旋转角度。

    function drawWatermarkImage(watermarkImg) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    canvas.width = 200; // 单个水印单元的宽度
    canvas.height = 200; // 单个水印单元的高度

    // 设置透明度
    ctx.globalAlpha = 0.1; // 例如，10%透明度

    // 旋转画布（可选，如果图片也要倾斜）
    const rotation = -20 * Math.PI / 180;
    ctx.translate(canvas.width / 2, canvas.height / 2);
    ctx.rotate(rotation);

    // 绘制图片
    // drawImage(image, dx, dy, dWidth, dHeight)
    // dx, dy 是图片在Canvas上的起始坐标
    // dWidth, dHeight 是图片绘制的宽度和高度
    // 我通常会把图片画在Canvas的中心，并调整大小
    const imgWidth = 80; // 绘制的图片宽度
    const imgHeight = 80; // 绘制的图片高度
    ctx.drawImage(watermarkImg, -imgWidth / 2, -imgHeight / 2, imgWidth, imgHeight);

    // 旋转回来，移回原点
    ctx.rotate(-rotation);
    ctx.translate(-canvas.width / 2, -canvas.height / 2);

    // 恢复透明度，以免影响后续绘制（如果有的话）
    ctx.globalAlpha = 1;

    // 将Canvas内容转换为图片URL并应用为背景
    const dataURL = canvas.toDataURL('image/png');
    document.body.style.backgroundImage = `url(${dataURL})`;
    document.body.style.backgroundRepeat = 'repeat';
    document.body.style.backgroundSize = `${canvas.width}px ${canvas.height}px`;
    document.body.style.pointerEvents = 'none';
    // ... 其他样式设置 ...
}

这种方法非常灵活，你可以用任何图标、Logo甚至复杂的图案作为水印。通过调整globalAlpha来控制透明度，drawImage的参数来控制图片的大小和位置，甚至可以结合文字和图片，在一个Canvas上同时绘制，创造出更复杂的水印效果。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~

相关阅读
更多>
最新阅读
更多>
课程推荐
更多>