前端实现水印的核心是使用canvas生成动态、个性化水印；1. 创建离屏canvas并绘制文字或图片内容；2. 通过todataurl将canvas转为图片url；3. 将该url设为页面背景并平铺；4. 使用resizeobserver或resize事件实现响应式适配；5. 利用mutationobserver或shadow dom增加移除难度；6. 支持图片水印，通过drawimage绘制并控制透明度、大小和旋转，最终实现难以篡改且视觉协调的全页水印效果。
在前端实现水印效果，核心思路往往离不开利用CSS的背景图片特性，或是更强大、灵活的HTML5 Canvas。我个人经验是，如果只是简单的静态水印，CSS足够了；但如果需要动态生成、适应内容、甚至带有用户信息的个性化水印，Canvas绝对是首选，它能让你把文字或图片“画”上去，然后把这个“画”好的内容作为背景应用到任何元素上。
解决方案
说起在前端搞水印，我个人觉得，最靠谱的办法还是得请出Canvas。它能让我们像画师一样，把水印内容（无论是文字还是图片）先“画”在一张透明画布上，再把这张画布变成一张图片，最后把这张图片当成背景平铺到页面上。这种方式灵活度很高，而且不容易被直接审查元素找到原始文字。
具体怎么做呢？我们一步步来：
-
创建离屏Canvas： 不需要把Canvas元素添加到DOM里，我们只是用它来生成图片。
const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); -
设置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); // 移回原点 -
将Canvas内容转换为图片URL： 这就是Canvas的厉害之处，它可以直接导出Base64编码的图片数据。
const dataURL = canvas.toDataURL('image/png'); // 或者'image/jpeg'，PNG支持透明度 -
应用为背景： 最后，把这个生成的图片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
。
具体操作：
-
加载图片： 你需要先创建一个
Image
对象，并设置它的
src
。确保图片加载完成后再进行绘制。
const img = new Image(); img.src = 'path/to/your/watermark-icon.png'; // 你的水印图片路径 img.onload = () => { // 图片加载完成后才能绘制 drawWatermarkImage(img); }; img.onerror = () => { console.error('水印图片加载失败！'); }; -
在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上同时绘制，创造出更复杂的水印效果。
评论（已关闭）
评论已关闭