日常工作中，經(jīng)常會遇到很多敏感的數(shù)據(jù)，為防止數(shù)據(jù)的泄露，我們要在數(shù)據(jù)上做一些”包裝“。目的就是讓那些有心泄露數(shù)據(jù)的”不法分子“迫于嚴(yán)重的”輿論壓力“而放棄不法行為，使之”犯罪未遂“，達(dá)到不戰(zhàn)而屈人之兵的效果。

在安全部門工作的我們，數(shù)據(jù)安全的觀念早已深入骨髓，每個文字，每張圖片，都要留心是否有泄露的風(fēng)險，怎么防止數(shù)據(jù)泄露，是我們一直思考的問題。比如圖片的水印，就是我們工作過程中經(jīng)常涉及到的問題。因為本身工作內(nèi)容就是審核平臺的開發(fā)，經(jīng)常有一些風(fēng)險圖片會在審核平臺出現(xiàn)，考慮到審核人員的安全意識參差不齊，所以為防止不安全的事情發(fā)生，圖片增加水印的工作是必須要做的。

分析問題

首先，考慮到業(yè)務(wù)場景，現(xiàn)階段的問題只是在審核過程中擔(dān)心數(shù)據(jù)的泄露，我們暫時只考慮顯式水印，既在圖片上增加一些可以區(qū)別你個人身份的文字或者其他數(shù)據(jù)。這樣就可以做到根據(jù)泄露的數(shù)據(jù)可以追查到個人，當(dāng)然，未雨綢繆，防患于未然的警示功能才是它最主要。

解決問題

實現(xiàn)方式

水印的實現(xiàn)方式有很多，根據(jù)實現(xiàn)功能的人員分工可以分為前端水印和后端水印，前端水印的優(yōu)點可以總結(jié)為三點，第一，可以不占用服務(wù)器資源，完全依賴客戶端的計算能力，減少服務(wù)端壓力。第二，速度快，無論哪種前端的實現(xiàn)方式，性能都是優(yōu)于后端的。第三，實現(xiàn)方式簡單。后端實現(xiàn)水印的最大優(yōu)勢也可以總結(jié)為三點，就是安全，安全，安全。知乎，微博都是采用后端實現(xiàn)的水印方案。但是綜合考慮，我們還是采用前端實現(xiàn)水印的方案。下面也會簡單介紹下 nodejs 怎么實現(xiàn)后端圖片水印。

node實現(xiàn)

提供三個 npm 包，本部分不是我們文章的重點，只提供簡單的 demo。

1，gm https://github.com/aheckmann/gm 6.4k star

const fs = require('fs'); const gm = require('gm');   gm('/path/to/my/img.jpg') .drawText(30, 20, "GMagick!") .write("/path/to/drawing.png", function (err) {   if (!err) console.log('done'); });

需要安裝 GraphicsMagick 或者 ImageMagick；

2，node-images：https://github.com/zhangyuanwei/node-images

const wrap = document.querySelector('#ReactApp'); const { clientWidth, clientHeight } = wrap; const waterHeight = 120; const waterWidth = 180; // 計算個數(shù) const [columns, rows] = [~~(clientWidth / waterWidth), ~~(clientHeight / waterHeight)] for (let i = 0; i < columns; i++) {     for (let j = 0; j <= rows; j++) {         const waterDom = document.createElement('div');         // 動態(tài)設(shè)置偏移值         waterDom.setAttribute('style', `             width: ${waterWidth}px;              height: ${waterHeight}px;              left: ${waterWidth + (i - 1) * waterWidth + 10}px;             top: ${waterHeight + (j - 1) * waterHeight + 10}px;             color: #000;             position: absolute`         );         waterDom.innerText = '測試水印';         wrap.appendChild(waterDom);     } }

不需要安裝其他工具，輕量級，zhangyuanwei 國人開發(fā)，中文文檔；

3，jimp：https://github.com/oliver-moran/jimp

可搭配 gifwrap 實現(xiàn) gif 水?。?/p>

前端實現(xiàn)

1，背景圖實現(xiàn)全屏水印

可以到阿里內(nèi)外個人信息頁面查看效果

優(yōu)點：圖片是后端生成，安全；

缺點：需要發(fā)起 http 請求，獲取圖片信息；

效果展示：由于是內(nèi)部系統(tǒng)，不方便展示效果。

2，dom 實現(xiàn)全圖水印和圖片水印

在圖片的 onload 事件里獲取圖片寬高，根據(jù)圖片大小生成水印區(qū)域，遮擋在圖片上層，dom 內(nèi)容為水印的文案或者其他信息，實現(xiàn)方式比較簡單。

const wrap = document.querySelector('#ReactApp'); const { clientWidth, clientHeight } = wrap; const waterHeight = 120; const waterWidth = 180; // 計算個數(shù) const [columns, rows] = [~~(clientWidth / waterWidth), ~~(clientHeight / waterHeight)] for (let i = 0; i < columns; i++) {     for (let j = 0; j <= rows; j++) {         const waterDom = document.createElement('p');         // 動態(tài)設(shè)置偏移值         waterDom.setAttribute('style', `             width: ${waterWidth}px;              height: ${waterHeight}px;              left: ${waterWidth + (i - 1) * waterWidth + 10}px;             top: ${waterHeight + (j - 1) * waterHeight + 10}px;             color: #000;             position: absolute`         );         waterDom.innerText = '測試水印';         wrap.appendChild(waterDom);     } }

優(yōu)點：簡單易實現(xiàn)；

缺點：圖片過大或者過多會有性能影響；

3，canvas 實現(xiàn)方式（第一版實現(xiàn)方案）

方法一：直接在圖片上操作

廢話不多說，直接上代碼

useEffect(() => {       // gif 圖不支持     if (src && src.includes('.gif')) {       setShowImg(true);     }     image.onload = function () {       try {         // 太小的圖不加載水印         if (image.width < 10) {           setIsDataError(true);           props.setIsDataError && props.setIsDataError(true);           return;         }         const canvas = canvasRef.current;         canvas.width = image.width;         canvas.height = image.height;         // 設(shè)置水印         const font = `${Math.min(Math.max(Math.floor(innerCanvas.width / 14), 14), 48)}px` || fontSize;         innerContext.font = `${font} ${fontFamily}`;         innerContext.textBaseline = 'hanging';         innerContext.rotate(rotate * Math.PI / 180);         innerContext.lineWidth = lineWidth;         innerContext.strokeStyle = strokeStyle;         innerContext.strokeText(text, 0, innerCanvas.height / 4 * 3);         innerContext.fillStyle = fillStyle;         innerContext.fillText(text, 0, innerCanvas.height / 4 * 3);         const context = canvas.getContext('2d');         context.drawImage(this, 0, 0);         context.rect(0, 0, image.width || 200, image.height || 200);            // 設(shè)置水印浮層         const pattern = context.createPattern(innerCanvas, 'repeat');         context.fillStyle = pattern;         context.fill();       } catch (err) {         console.info(err);         setShowImg(true);       }     };     image.onerror = function () {       setShowImg(true);     };   }, [src]);

優(yōu)點：純前端實現(xiàn)方式，右鍵復(fù)制的圖片也是有水印的；

缺點：不支持 gif，圖片必須支持跨域；

效果展示：下文給出。

方法二：canvas 生成水印 url 賦值給 css background 屬性

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://xxx.xxx.jpg" /> <p className="warter-mark-area" style={{ backgroundImage: `url(${getBase64Background({})})` }} />

優(yōu)點：純前端實現(xiàn)方式，支持跨域，支持 git 圖水??；

缺點：生成的 base64 url 比較大；

其實根據(jù)這兩種 canvas 的實現(xiàn)方式可以輕松的想出第三種方式，就是在圖片的上層遮一層 第一方法中的非圖片的 canvas，這樣就能完美的避免兩種方案的缺點。但是停留片刻想一下，兩種方案的結(jié)合，還是使用 canvas 去繪制，是不是有更簡單易懂的方式呢。對，用 svg 替代。

4，SVG 方式（正在使用的方案）

給出一個 react 版的水印組件。

export const WaterMark = (props) => {   // 獲取水印數(shù)據(jù)   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;   // 設(shè)置背景圖和背景圖樣式   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 (     <p className={styles.water_mark_wrapper} ref={boxRef}>       <p className={styles.water_mark_box} style={boxStyle} />       {isError         ? <ErrorSourceData src={src} showSrc={showSrc} height={propsHeight} text="圖片加載錯誤" helpText="點擊復(fù)制圖片鏈接" />         : (           <>             <img onLoad={onLoad} referrerPolicy="no-referrer" onError={onError} src={src} alt="圖片顯示錯誤" />             <Icon className={styles.img_loading} type="loading" />           </>         )       }     </p>   ); };

優(yōu)點：支持 gif 圖水印，不存在跨域問題，使用 repeat 屬性，無插入 dom 過程，無性能問題；

QA

問題一：

如果把 watermark 的 dom 刪除了，圖片不就是無水印了嗎？

答案：

可以利用 MutationObserver 監(jiān)聽 water 的節(jié)點，如果節(jié)點被修改，圖片也隨之隱藏；

問題二：

鼠標(biāo)右鍵復(fù)制圖片？

答案：

全部的圖片都禁用了右鍵功能

問題三：

如果從控制臺的network獲取圖片信息呢？

答案：

此操作暫時沒有想到好的解決辦法，建議采用后端實現(xiàn)方案

總結(jié)

前端實現(xiàn)的水印方案始終只是一種臨時方案，業(yè)務(wù)后端實現(xiàn)又耗費服務(wù)器資源，其實最理想的解決方式就是提供一個獨立的水印服務(wù)，雖然加載過程中會略有延遲，但是相對與數(shù)據(jù)安全來說，毫秒級的延遲還是可以接受的，這樣又能保證不影響業(yè)務(wù)的服務(wù)穩(wěn)定性。

在每天的答疑過程中，也會有很多業(yè)務(wù)方來找我溝通水印遮擋風(fēng)險點的問題，每次只能用數(shù)據(jù)安全的重要性來回復(fù)他們，當(dāng)然，水印的大小，透明度，密集程度也都在不斷的調(diào)優(yōu)中，相信會有一個版本，既能起到水印的作用，也能更好的解決遮擋問題。

推薦學(xué)習(xí)：html視頻教程