--- theme: fancy --- # 什么是水印 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6e1a824a2cab4b9ab2dcfb803bd6ea90~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1952&h=1664&s=2276106&e=png&b=888e96) ## 概念 > 水印技术是一种在数字内容中嵌入隐蔽或半隐蔽信息的方法，这些信息可以是文本、图像或其他标识符。 ## 作用 1. **版权保护**：水印可以帮助内容创作者保护其作品的版权，防止他人未经许可复制或传播其作品。 1. **来源追踪**：通过在内容中嵌入特定的标识，水印可以帮助追踪内容的传播路径，尤其是在内容被非法分发时。 1. **所有权证明**：水印可以作为证明内容所有权的法律证据。 1. **防伪**：在某些情况下，水印还可以用于验证内容的真实性，防止伪造。 1. **访问控制**：水印可以用来标记不同的访问级别或分发渠道，从而对内容的访问和使用进行控制。 ## 组成在我看来，将要展示的信息作为**印花**，放到一张**画布**上，再结合一些**样式设置**，就能得到覆盖页面的`「水印」组件`了。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e247286786aa4af498793705a5d38d9d~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=508&h=359&s=13059&e=png&b=ffffff) # 我司网页的水印考虑到隐私性，仅截图局部做展示，如下： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1494bf080dff48fb8a4f817072b94188~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1517&h=378&s=53527&e=png&b=ffffff) 如果我们在`「元素标签页」`直接删除与`「水印」`相关的块级元素。 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f6f17961b8754dd3b04fc540b53df074~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1273&h=703&s=261500&e=png&b=fefdfd) 我们会发现可以成功删除。此时我司系统的这个页面就是一个没有水印的页面了。 (其实，除了直接删除块级元素之外，我们还可以通过修改样式，将水印隐藏，比如设置: `visibility: hidden`) ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6e94274715fb4126a5db77b22d979740~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=714&h=432&s=8106&e=png&b=ffffff) # Antd 5.x的水印我们继续用同样的手法，试着删除antd的水印。 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3ae82623c0374d0682710b1c0431b99d~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1426&h=1234&s=179106&e=png&b=202327) 会发现删除失败。与其说是删除失败，不如说是按下「backspace」后好像一点反应都没有。这里是一个[Demo](https://codepen.io/Lookout823/pen/gOJgYpE?editors=001)链接，大家可以亲自尝试下。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e847296fa1a4440a9c23d95bba4c1593~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1626&h=800&s=60053&e=png&b=ffffff) 和`Antd`一对比，我们不难发现，我司系统页面上的水印可以被**轻而易举地删除**😣。这不由得让人心中响起一声呐喊： > 水印保护我们，但是**谁**来保护水印？ # 保护水印就让我们一起来阅读antd 5.x的源码，看看它为了`「保护水印」`都做了什么 [Watermark组件的git仓库链接](https://github.com/ant-design/ant-design/blob/master/components/watermark/index.tsx) ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3d64852077b142249014c123845b4f44~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=449&h=621&s=33196&e=png&b=ffffff) ## 思维导图 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/97039e07db1d40fd9bcd91b90e4f3be3~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=917&h=735&s=45366&e=png&b=ffffff) ## 源码分析 ### useWatermark ```typescript import * as React from 'react'; import { getStyleStr } from './utils'; // Base size of the canvas, 1 for parallel layout and 2 for alternate layout // Only alternate layout is currently supported export const BaseSize = 2; export const FontGap = 3; // Prevent external hidden elements from adding accent styles const emphasizedStyle = { visibility: 'visible !important', }; export type AppendWatermark = ( base64Url: string, markWidth: number, container: HTMLElement, ) => void; export default function useWatermark( markStyle: React.CSSProperties, ): [ appendWatermark: AppendWatermark, removeWatermark: (container: HTMLElement) => void, isWatermarkEle: (ele: Node) => boolean, ] { const [watermarkMap] = React.useState(() => new Map()); const appendWatermark = (base64Url: string, markWidth: number, container: HTMLElement) => { if (container) { if (!watermarkMap.get(container)) { const newWatermarkEle = document.createElement('div'); watermarkMap.set(container, newWatermarkEle); } const watermarkEle = watermarkMap.get(container)!; watermarkEle.setAttribute( 'style', getStyleStr({ ...markStyle, backgroundImage: `url('${base64Url}')`, backgroundSize: `${Math.floor(markWidth)}px`, ...(emphasizedStyle as React.CSSProperties), }), ); // Prevents using the browser `Hide Element` to hide watermarks watermarkEle.removeAttribute('class'); if (watermarkEle.parentElement !== container) { container.append(watermarkEle); } } return watermarkMap.get(container); }; const removeWatermark = (container: HTMLElement) => { const watermarkEle = watermarkMap.get(container); if (watermarkEle && container) { container.removeChild(watermarkEle); } watermarkMap.delete(container); }; const isWatermarkEle = (ele: any) => Array.from(watermarkMap.values()).includes(ele); return [appendWatermark, removeWatermark, isWatermarkEle]; } ``` 注意**第29行** ```ts const [watermarkMap] = React.useState(() => new Map()); ``` > 为什么这里要在`useState`里面使用`() => new Map()`，而不是`new Map()`去创建对象？因为采用`new Map()`的写法，会在每次重新渲染时，都得到一个新的对象实例，这会造成不必要的性能开销。我们可以看下[React官方文档](https://react.dev/reference/react/useState#updating-objects-and-arrays-in-state)中有关`useState`的内容: ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cb05b4e562a641848e3c0a4c4db30c5f~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1583&h=1031&s=131734&e=png&b=fefefe) ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2de4886ae3fd4d26b5d812d460747a55~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1591&h=1041&s=136975&e=png&b=fefefe) ```js // 我们可以将antd中的() => new Map()当作是和例子中createInitialTodos一样的声明 function createInitialMap() { return new Map(); } // 于是，antd源码也可以写成这样2种方式 const [watermarkMap] = React.useState(createInitialMap);// = React.useState(() => new Map()); const [watermarkMap] = React.useState(createInitialMap());// = React.useState(new Map()); ``` > 那么，为什么`useWatermark`**不需要**在每次重新渲染时，都生成一个新的`watermarkMap`实例呢？我们**简单回顾一下React组件渲染的几条规则**，假设我们现在有个组件A，其中引入了组件B。什么情况下作为hook使用的组件B会重新渲染: - **组件B是否使用了useState或useContext**：如果组件B中使用了`useState`或`useContext`，并且它们的依赖发生了变化，那么组件B将会重新渲染。这是因为React的hook机制会在依赖变化时触发组件的重新渲染。 - **组件B是否接收了来自组件A的props**：如果组件A向组件B传递了props，并且这些props发生了变化，那么组件B将会重新渲染。这是因为React组件会在其接收的props发生变化时重新渲染。 - **组件B是否使用了useContext**：如果组件B使用了`useContext`，那么当上下文发生变化时，组件B会重新渲染。 - **组件B是否是纯组件或使用了React.memo**：如果组件B是一个纯组件（PureComponent）或使用了`React.memo`进行包装，那么组件B的重新渲染会取决于其props是否发生了变化。`React.memo`会对props进行浅比较，只有当props发生变化时，组件才会重新渲染。 OK，我们先看`useWatermark`自己的代码，组件内容只使用了一次useState，并且这个useState并没有返回setState的函数方法。因为我们可以得出**第1条结论**： > `useWatermark`自己内部的state**并不会**触发重新渲染。接着我们看下`useWatermark`的props，它从外部接收了一个 `markStyle` 参数，这是一个 React CSS 属性对象，用于定义水印的样式。因此我们可以得出**第2条结论**: > 只有 `markStyle`发生变化，才会导致`useWatermark`的重新渲染。至此，我们要讨论的问题就从 “为什么`useWatermark`每次重新渲染**不需要**生成一个新的`watermarkMap`实例” 转变成了 “为什么 `markStyle`发生变化，`useWatermark`也**不需要**生成一个新的`watermarkMap`实例” 我们临时看下`useWatermark`在`index.tsx`文件中的使用方式 ```ts const markStyle = React.useMemo(() => { const mergedStyle: React.CSSProperties = { zIndex, position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', pointerEvents: 'none', backgroundRepeat: 'repeat', }; /** Calculate the style of the offset */ let positionLeft = offsetLeft - gapXCenter; let positionTop = offsetTop - gapYCenter; if (positionLeft > 0) { mergedStyle.left = `${positionLeft}px`; mergedStyle.width = `calc(100% - ${positionLeft}px)`; positionLeft = 0; } if (positionTop > 0) { mergedStyle.top = `${positionTop}px`; mergedStyle.height = `calc(100% - ${positionTop}px)`; positionTop = 0; } mergedStyle.backgroundPosition = `${positionLeft}px ${positionTop}px`; return mergedStyle; }, [zIndex, offsetLeft, gapXCenter, offsetTop, gapYCenter]); // ============================= Effect ============================= // Append watermark to the container const [appendWatermark, removeWatermark, isWatermarkEle] = useWatermark(markStyle); ``` `markStyle`是通过使用React.Memo计算得出的。这就意味着只有`zIndex`、`offsetLeft`、`gapXCenter`、`offsetTop`和`gapYCenter`发生变化时，`markStyle`才会发生变化。至此，我们的问题转换成最终形态： > 为什么`zIndex`、`offsetLeft`、`gapXCenter`、`offsetTop`和`gapYCenter`发生变化，`useWatermark`也**不需要**生成一个新的`watermarkMap`实例？其实倒也不必把问题想得如此复杂，思考问题的角度是可以转换的。只不过聊到了重新渲染，咱们就赶巧**回顾一下知识点**。换个角度来看其实问题很简单： > 每次重新渲染时，创建一个新的`watermarkMap`实例，这是否真的有必要？让我们回看`appendWatermark`，此函数方法内部也是通过`get`的方法去找到原先`container`对应的水印对象，然后通过`setAttribute`，实现数据的更新。 ```ts watermarkEle.setAttribute( 'style', getStyleStr({ ...markStyle, backgroundImage: `url('${base64Url}')`, backgroundSize: `${Math.floor(markWidth)}px`, ...(emphasizedStyle as React.CSSProperties), }), ); ``` 因此，就算`markStyle`,即:`zIndex`、`offsetLeft`、`gapXCenter`、`offsetTop`和`gapYCenter`发生变化，也无需通过生成一个新的`watermarkMap`实例去更新水印的信息。我们期望`watermarkMap`应该是**跨渲染持久化**的，而不是每次渲染都重新创建，从而避免不必要的**性能开销**。 > 这里的**性能开销**，考虑到**篇幅问题**，会在下一篇文章，通过一个demo（后续会上传至CodeSandbox），结合浏览器调试工具`performance`，给大家直观地展示一下性能上的差异。至此，我们花了很长的篇幅去聊了一下【关于在`useState`中该如何合理地进行初始化赋值】这个问题，也顺便回顾了React组件触发重新渲染的几种场景。接下来，我们继续往下分析源码。 ##### appendWatermark `appendWatermark` 函数用于将水印添加到指定的容器元素。它接受三个参数： - `base64Url`：水印图片的 base64 编码字符串。 - `markWidth`：水印图片的宽度。 - `container`：要添加水印的容器元素。 ```ts const appendWatermark = (base64Url: string, markWidth: number, container: HTMLElement) => { if (container) { if (!watermarkMap.get(container)) { const newWatermarkEle = document.createElement('div'); watermarkMap.set(container, newWatermarkEle); } const watermarkEle = watermarkMap.get(container)!; watermarkEle.setAttribute( 'style', getStyleStr({ ...markStyle, backgroundImage: `url('${base64Url}')`, backgroundSize: `${Math.floor(markWidth)}px`, ...(emphasizedStyle as React.CSSProperties), }), ); // Prevents using the browser `Hide Element` to hide watermarks watermarkEle.removeAttribute('class'); if (watermarkEle.parentElement !== container) { container.append(watermarkEle); } } return watermarkMap.get(container); }; ``` 1. 函数首先检查 `watermarkMap`（用于存储容器元素和对应的水印元素的关联关系。）中是否已经有了对应容器的水印元素，如果没有，则创建一个新的 `div` 元素作为水印元素，并将其添加到 `watermarkMap` 中。 2. 然后，设置水印元素的样式，包括背景图片、背景大小和一些强调样式(即`emphasizedStyle`)，以防止水印被隐藏。 ```ts // Prevent external hidden elements from adding accent styles const emphasizedStyle = { visibility: 'visible !important', }; ``` 3. 最后，如果水印元素尚未添加到容器中，将其添加到容器中。 > > 注意，由于`watermarkMap`作为state变量是个对象，因此在此函数方法内调用`watermarkMap`自身的`set()`方法并不会触发re-render，因为该state变量的地址一直没有发生改变。 ##### removeWatermark `removeWatermark` 函数用于从指定的容器元素中移除水印。它接受一个参数: - `container`：需要移除水印的容器元素。 ```ts const removeWatermark = (container: HTMLElement) => { const watermarkEle = watermarkMap.get(container); if (watermarkEle && container) { container.removeChild(watermarkEle); } watermarkMap.delete(container); }; ``` 不知道各位看到`container.removeChild(watermarkEle)`和`watermarkMap.delete(container)`同时出现，是否会有如下疑惑： > 为什么不只写一行`watermarkMap.delete(container)`？回答这个问题，我们可以用反推的方式。假设这里只写了一行`watermarkMap.delete(container)`,那么在`DOM`(即`container`)中仍然存在未被移除的水印元素。这将导致`DOM`状态和`watermarkMap`状态不一致，引起一些问题，比如: - 尝试在同一个容器上再次添加水印时，由于`watermarkMap`中已经没有该容器的键名，它会认为容器还没有水印元素并尝试添加一个新的，从而导致DOM中存在重复的水印元素。 - `watermarkMap`是一个Map对象，`watermarkMap.delete(container)`只是从Map中移除一个键值对，并不会影响到实际的`HTMLDivElement`对象。也就是说，`DOM`里还是保留着这个水印元素，删了等于没删。因此，通过先调用`container.removeChild(watermarkEle)`，可以确保水印元素首先从`DOM`中被删除。然后，再通过调用`watermarkMap.delete(container)`，从Map中移除对应的映射关系。这样，`DOM`的实际内容和`watermarkMap`的当前状态就保持一致了，我们成功地**彻底地删除**了水印，并且也不会影响到下一次对此`DOM`进行添加水印的操作。 ##### isWatermarkEle `isWatermarkEle` 函数用于检查一个元素是否是水印元素。它接受一个参数: - `ele`：需要检查的元素。 ```ts const isWatermarkEle = (ele: any) => Array.from(watermarkMap.values()).includes(ele); ``` 函数通过检查 `watermarkMap` 的值中是否包含这个元素来判断它是否是水印元素。 ### useClips ```ts import type { WatermarkProps } from '.'; export const FontGap = 3; function prepareCanvas( width: number, height: number, ratio: number = 1, ): [ ctx: CanvasRenderingContext2D, canvas: HTMLCanvasElement, realWidth: number, realHeight: number, ] { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d')!; const realWidth = width * ratio; const realHeight = height * ratio; canvas.setAttribute('width', `${realWidth}px`); canvas.setAttribute('height', `${realHeight}px`); ctx.save(); return [ctx, canvas, realWidth, realHeight]; } /** * Get the clips of text content. * This is a lazy hook function since SSR no need this */ export default function useClips() { // Get single clips function getClips( content: NonNullable | HTMLImageElement, rotate: number, ratio: number, width: number, height: number, font: Required>, gapX: number, gapY: number, ): [dataURL: string, finalWidth: number, finalHeight: number] { // ================= Text / Image ================= const [ctx, canvas, contentWidth, contentHeight] = prepareCanvas(width, height, ratio); if (content instanceof HTMLImageElement) { // Image ctx.drawImage(content, 0, 0, contentWidth, contentHeight); } else { // Text const { color, fontSize, fontStyle, fontWeight, fontFamily, textAlign } = font; const mergedFontSize = Number(fontSize) * ratio; ctx.font = `${fontStyle} normal ${fontWeight} ${mergedFontSize}px/${height}px ${fontFamily}`; ctx.fillStyle = color; ctx.textAlign = textAlign; ctx.textBaseline = 'top'; const contents = Array.isArray(content) ? content : [content]; contents?.forEach((item, index) => { ctx.fillText(item ?? '', contentWidth / 2, index * (mergedFontSize + FontGap * ratio)); }); } // ==================== Rotate ==================== const angle = (Math.PI / 180) * Number(rotate); const maxSize = Math.max(width, height); const [rCtx, rCanvas, realMaxSize] = prepareCanvas(maxSize, maxSize, ratio); // Copy from `ctx` and rotate rCtx.translate(realMaxSize / 2, realMaxSize / 2); rCtx.rotate(angle); if (contentWidth > 0 && contentHeight > 0) { rCtx.drawImage(canvas, -contentWidth / 2, -contentHeight / 2); } // Get boundary of rotated text function getRotatePos(x: number, y: number) { const targetX = x * Math.cos(angle) - y * Math.sin(angle); const targetY = x * Math.sin(angle) + y * Math.cos(angle); return [targetX, targetY]; } let left = 0; let right = 0; let top = 0; let bottom = 0; const halfWidth = contentWidth / 2; const halfHeight = contentHeight / 2; const points = [ [0 - halfWidth, 0 - halfHeight], [0 + halfWidth, 0 - halfHeight], [0 + halfWidth, 0 + halfHeight], [0 - halfWidth, 0 + halfHeight], ]; points.forEach(([x, y]) => { const [targetX, targetY] = getRotatePos(x, y); left = Math.min(left, targetX); right = Math.max(right, targetX); top = Math.min(top, targetY); bottom = Math.max(bottom, targetY); }); const cutLeft = left + realMaxSize / 2; const cutTop = top + realMaxSize / 2; const cutWidth = right - left; const cutHeight = bottom - top; // ================ Fill Alternate ================ const realGapX = gapX * ratio; const realGapY = gapY * ratio; const filledWidth = (cutWidth + realGapX) * 2; const filledHeight = cutHeight + realGapY; const [fCtx, fCanvas] = prepareCanvas(filledWidth, filledHeight); function drawImg(targetX = 0, targetY = 0) { fCtx.drawImage( rCanvas, cutLeft, cutTop, cutWidth, cutHeight, targetX, targetY, cutWidth, cutHeight, ); } drawImg(); drawImg(cutWidth + realGapX, -cutHeight / 2 - realGapY / 2); drawImg(cutWidth + realGapX, +cutHeight / 2 + realGapY / 2); return [fCanvas.toDataURL(), filledWidth / ratio, filledHeight / ratio]; } return getClips; } ``` ##### prepareCanvas `prepareCanvas`函数用于创建一个新的`