js怎样实现水印效果

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

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

解决方案

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

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

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

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

   登录后复制

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

   

   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

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

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

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

另一种更高级、也更精准的办法是使用

ResizeObserver

window.resize

ResizeObserver

Insou AI

Insou AI 是一款强大的人工智能助手，旨在帮助你轻松创建引人入胜的内容和令人印象深刻的演示。

69

查看详情

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;

更进一步，我们可以利用

MutationObserver

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

以上就是js怎样实现水印效果的详细内容，更多请关注php中文网其它相关文章！