前端如何实现水印功能

蚊子前端博客
发布于 2023-03-24 23:47
介绍两种创建水印的方式和水印如何避免被修改

我们开发出来的产品,为了避免信息泄露,或者为了版权声明等,都会为页面添加水印。

水印又会分为固定水印和私有水印,例如品牌相关、版权声明之类的,一般是使用固定水印,即任何人打开该页面,水印都是一样的,这种一般是设置背景图片平铺即可,如下图中,用户即使截图传播,也能知道“腾讯新闻”的品牌:

有品牌的固定水印-蚊子的前端博客

不过今天我们主要讲解的是「私有水印」,即以当前用户的信息、当前时间、当前所在浏览器等信息,来实时生成水印,每个用户产生的水印的是不一样的。

动态生成水印有两种方式:

  • 使用 div 来创建,这种方式方便控制样式;

  • 使用 canvas 来创建,然后导出成背景图,减少 div 元素的使用;

接下来我们一一来说明这两种方式都是如何使用的,并且还会讲解下如何避免水印被删除和篡改。

1. 使用 div 来创建水印

使用 div 可以创建水印时,首先我们创建出一组的水印,然后再循环生成多个,铺满屏幕即可。

COPYJAVASCRIPT

const createWaterItem = ({ texts, width, height }) => { const div = document.createElement("div"); let html = ""; texts.forEach((text) => { html += `<p>${text}</p>`; }); div.innerHTML = html; div.style.cssText = `width: ${width}px; height: ${height}px`; div.className = "water-item"; return div; }; /** * 通过div来创建水印 */ const createWaterMark = ({ texts, // 要展示的文本,string[] target = document.body, // 水印添加的位置 width = 300, // 单独一小块水印的尺寸 height = 200, // 单独一小块水印的尺寸 }) => { const { offsetHeight, offsetWidth } = target; const col = Math.ceil(offsetWidth / width); const row = Math.ceil(offsetHeight / height); const div = document.createElement("div"); div.style.cssText = `width: ${width * col}px; height: ${offsetHeight}px`; const water = document.createElement("div"); water.id = "watermark"; const fragment = document.createDocumentFragment(); for (let i = 0; i < col * row; i++) { fragment.append(createWaterItem({ texts, width, height })); } div.appendChild(fragment); water.appendChild(div); target.appendChild(water); const style = document.createElement("style"); style.innerHTML = `#watermark { position: absolute; top: 0; left: 0; width: 100%; z-index: 19; pointer-events: none; overflow: hidden; color: #dd0000; } #watermark > div { display: flex; flex-wrap: wrap; } #watermark .water-item { text-align: center; transform: rotate(20deg); }`; document.head.appendChild(style); }; createWaterMark({ texts: [ "蚊子的博客", new Date().toLocaleString(), "当前在蚊子的前端博客网站上", ], });

执行之后,得到的效果:

使用div创建的水印-蚊子的前端博客

不过由此也能看到,创建出了无数的 dom 元素:

使用div创建水印后的dom元素-蚊子的前端博客

随着页面的增长(chang),dom 元素也只会越来越多。因此,虽然 div 也能达到水印的效果,但我们并不推荐这种方式。

2. 使用 canvas 来创建水印

使用 canvas 来创建水印,主要是用 canvas 把文字转成图片,然后再把图片作为背景图进行平铺。

2.1 具体的代码实现

直接上代码。

COPYJAVASCRIPT

import dayjs from "dayjs"; /** * 获取水印要插入的元素 * @param selector 选择器 */ const getRoot = (selector?: string | Element) => { if (selector) { if (typeof selector === "string") { const dom = document.querySelector(selector); if (dom) { return dom; } } else if (selector) { return selector; } } return document.body; }; const waterMarkId = 'water-mark'; /** * 创建水印 * @param texts 水印的文案 * @param root 水印插入的位置 * @returns 样式 */ const create = (texts: string[], root: Element) => { const dpr = window.devicePixelRatio; const width = 400 * dpr; const height = 300 * dpr; const fontSize = 18; const rotate = -20; // 水印倾斜角度,单位度 const parentRect = root.getBoundingClientRect(); const canvas = document.createElement("canvas"); canvas.style.width = `${width / dpr}px`; canvas.style.height = `${height / dpr}px`; canvas.width = width; canvas.height = height; canvas.style.display = "none"; document.body.appendChild(canvas); const ctx = canvas.getContext("2d"); if (!ctx) { return ""; } ctx.translate(width / 2, height / 2); ctx.rotate((rotate * Math.PI) / 180); ctx.translate(-width / 2, -height / 2); ctx.font = `${fontSize}px Verdana`; // ctx.fillStyle = "rgba(17, 17, 17, 0.2)"; ctx.fillStyle = "rgba(191, 191, 191, 0.5)"; // 设置上下左右居中 ctx.textAlign = "center"; ctx.textBaseline = "middle"; // 为避免多行文本重叠到一块 const half = Math.floor(texts.length / 2); texts.push(dayjs().format("YYYY/MM/DD HH:mm:ss")); texts.forEach((text, index) => { const diff = (fontSize + 8) * Math.abs(index - half); const y = index <= half ? height / 2 - diff : height / 2 + diff; ctx.fillText(text, width / 2, y); }); // 这里为了可以直接使用,就把样式写在了js中,您也可以把样式单独提取出来 const style: any = { top: 0, left: 0, width: `${parentRect.width}px`, height: `${parentRect.height}px`, "background-image": `url(${canvas.toDataURL("image/png")})`, // 将生成的图片作为背景图 "background-repeat": "repeat-y", // 当时我们的项目要求是只向下平铺,您可以自行修改 "background-position": "center top", position: "absolute", "z-index": 99, "pointer-events": "none", }; const cssText = Object.keys(style) .map((key) => `${key}: ${(style as any)[key]}`) .join(";"); const waterDom = document.getElementById(waterMarkId); if (waterDom) { waterDom.parentNode?.removeChild(waterDom); } const div = document.createElement("div"); div.id = waterMarkId; div.style.cssText = cssText; root.appendChild(div); canvas.parentNode?.removeChild(canvas); return cssText; }; /** * 创建水印 * @param texts 水印的文案 * @param selector 水印所在的容器,不传时则默认body * @returns 取消监听水印变化的函数 */ const createWaterMark = (texts: string[], selector?: string | Element) => { const root = getRoot(selector); create(texts, root); };

调用:

COPYJAVASCRIPT

createWaterMark([ "蚊子的博客", new Date().toLocaleString(), "当前在蚊子的前端博客网站上", ]);

加油-蚊子的前端博客

2.2 如何让文字上下左右居中

渲染的文本默认是在左上角,但我们有多行文本,每行文本都需要居中显示,而且还有轻微的旋转角度。如果完全以左上角为坐标旋转的话,会有部分文字被遮挡。

我们首先通过translate()方法,将新的起点偏移到中间,然后再进行渲染,再回到最初的起点:

COPYJAVASCRIPT

ctx.translate(width / 2, height / 2); ctx.rotate((rotate * Math.PI) / 180); ctx.translate(-width / 2, -height / 2);

关于 canvas 中的文字的上下左右居中的问题。canvas 有 textAlign 和 textBaseline 两个属性设置文字的对齐方式,这两个属性是用来设置文本行内整体的对齐方式。

canvas 中 textAlign和 textBaseline 的对齐方式-蚊子的前端博客

若想上下左右居中时,可以这样设置:

COPYJAVASCRIPT

ctx.textAlign = "center"; ctx.textBaseline = "middle";

当只有一行文本时,没什么问题。若有多行本文时,就会发现多行文本重叠到一起。这就需要自己根据文字的大小,进行 y 轴上的偏移:

COPYJAVASCRIPT

const half = Math.floor(texts.length / 2); // 获取多行文本的中间位置,决定是向上偏移,还是向下偏移 texts.forEach((text, line) => { // 根据文字大小和该行的行数,算出偏移量 const diff = (fontSize + 8) * Math.abs(line - half); // 获取该行文字描绘的y轴坐标:当小于一半时,向上偏移;否则向下偏移 const y = line <= half ? height / 2 - diff : height / 2 + diff; ctx.fillText(text, width / 2, y); });

最终形成的水印图片效果:

水印图片的效果-蚊子的前端博客

3. 避免水印被删除和篡改

我们为了防止用户使用开发者工具之类的工具,删除或者修改节点的样式去除水印,这时候可以用到 MutationObserver 构造函数,它可以创建并返回一个新的 MutationObserver 它会在指定的 DOM 发生变化时被调用。

在上面的 createrWaterMark() 中:

COPYJAVASCRIPT

const createWaterMark = (texts: string[], selector?: string | Element) => { const root = getRoot(selector); const originalCssText = create(texts, root); // 创建水印,并留存样式,用作后续的样式对比 // 为避免水印被删除或样式被修改,这里监听dom节点的变化 const observer = new MutationObserver(() => { const waterMarkDom = document.getElementById(waterMarkId); if (waterMarkDom) { // 水印还在,但被修改了样式,重新设置样式 const newStyle = waterMarkDom.getAttribute("style"); if (originalCssText !== newStyle) { waterMarkDom.setAttribute("style", originalCssText); } } else { // 该水印已被删除,重新创建 create(texts, root); } }); observer.observe(root, { attributes: true, // 开启监听属性 childList: true, // 开启监听子节点 subtree: true, // 开启监听子节点下面的所有节点 }); // 返回一个 destory 方法,用于在 useEffect() 中取消该监听 return () => { observer.disconnect(); }; };

当检测到水印的样式被修改,或者水印被删除,则会重置样式,或者重新创建水印。但这也只是简单的检测,并不能完全保证水印被修改。

标签:
阅读(718)

公众号:

qrcode

微信公众号:前端小茶馆

公众号:

qrcode

微信公众号:前端小茶馆