前端实现水印的几种方式( 二 ) _前端

export const getBase64Background = (props) => {const { nick, empId } = GlobalConfig.userInfo;const {rotate = -20,height = 75,width = 85,text = `${nick}-${empId}`,fontSize = '14px',lineWidth = 2,fontFamily = 'microsoft yahei',strokeStyle = 'rgba(255, 255, 255, .15)',fillStyle = 'rgba(0, 0, 0, 0.15)',position = { x: 30, y: 30 },} = props;const image = new Image();image.crossOrigin = 'Anonymous';const canvas = document.createElement('canvas');const context = canvas.getContext('2d');canvas.width = width;canvas.height = height;context.font = `${fontSize} ${fontFamily}`;context.lineWidth = lineWidth;context.rotate(rotate * Math.PI / 180);context.strokeStyle = strokeStyle;context.fillStyle = fillStyle;context.textAlign = 'center';context.textBaseline = 'hanging';context.strokeText(text, position.x, position.y);context.fillText(text, position.x, position.y);return canvas.toDataURL('image/png');};// 使用方式 <img src=https://www.isolves.com/it/cxkf/qd/2022-03-18/"https://xxx.xxx.jpg" />

优点：纯前端实现方式，支持跨域，支持 git 图水印；缺点：生成的 base64 url 比较大；效果展示：下文给出。其实根据这两种 canvas 的实现方式可以轻松的想出第三种方式，就是在图片的上层遮一层第一方法中的非图片的 canvas，这样就能完美的避免两种方案的缺点。但是停留片刻想一下，两种方案的结合，还是使用 canvas 去绘制，是不是有更简单易懂的方式呢。对，用 svg 替代。
4，SVG 方式（正在使用的方案）给出一个 react 版的水印组件。

export const WaterMark = (props) => {// 获取水印数据const { nick, empId } = GlobalConfig.userInfo;const boxRef = React.createRef();const [waterMarkStyle, setWaterMarkStyle] = useState('180px 120px');const [isError, setIsError] = useState(false);const {src, text = `${nick}-${empId}`, height: propsHeight, showSrc, img, nick, empId} = props;// 设置背景图和背景图样式const boxStyle = {backgroundSize: waterMarkStyle,backgroundImage: `url("data:image/svg+xml;utf8,<svg width='100%' height='100%' xmlns='http://www.w3.org/2000/svg' version='1.1'><text width='100%' height='100%' x='20' y='68'transform='rotate(-20)' fill='rgba(0, 0, 0, 0.2)' font-size='14' stroke='rgba(255, 255, 255, .2)' stroke-width='1'>${text}</text></svg>")`,};const onLoad = (e) => {const dom = e.target;const {previousSibling, nextSibling, offsetLeft, offsetTop,} = dom;// 获取图片宽高const { width, height } = getComputedStyle(dom);if (parseInt(width.replace('px', '')) < 180) {setWaterMarkStyle(`${width} ${height.replace('px', '') / 2}px`);};previousSibling.style.height = height;previousSibling.style.width = width;previousSibling.style.top = `${offsetTop}px`;previousSibling.style.left = `${offsetLeft}px`;// 加载 loading 隐藏nextSibling.style.display = 'none';};const onError = (event) => {setIsError(true);};return (<div className={styles.water_mark_wrapper} ref={boxRef}><div className={styles.water_mark_box} style={boxStyle} />{isError? <ErrorSourceData src=https://www.isolves.com/it/cxkf/qd/2022-03-18/{src} showSrc={showSrc} height={propsHeight} text="图片加载错误" helpText="点击复制图片链接" />: (<>)}

);};优点：支持 gif 图水印，不存在跨域问题，使用 repeat 属性，无插入 dom 过程，无性能问题；缺点：。。。dom 结构展示：

文章插图

5，效果图展示canvas 和 svg 实现的效果在展示上没有很大的区别，所以效果图就一张图全部展示了。

QA问题一：如果把 watermark 的 dom 删除了，图片不就是无水印了吗？答案：可以利用 MutationObserver 监听 water 的节点，如果节点被修改，图片也随之隐藏；
问题二：鼠标右键复制图片？答案：全部的图片都禁用了右键功能
问题三：如果从控制台的network获取图片信息呢？答案：此操作暂时没有想到好的解决办法，建议采用后端实现方案
总结前端实现的水印方案始终只是一种临时方案，业务后端实现又耗费服务器资源，其实最理想的解决方式就是提供一个独立的水印服务，虽然加载过程中会略有延迟，但是相对与数据安全来说，毫秒级的延迟还是可以接受的，这样又能保证不影响业务的服务稳定性。在每天的答疑过程中，也会有很多业务方来找我沟通水印遮挡风险点的问题，每次只能用数据安全的重要性来回复他们，当然，水印的大小，透明度，密集程度也都在不断的调优中，相信会有一个版本，既能起到水印的作用，也能更好的解决遮挡问题。