實現方式
水印的實現方式有很多，根據實現功能的人員分工可以分為前端水印和後端水印，前端水印的優點可以總結為三點，第一，可以不佔用伺服器資源，完全依賴客戶端的計算能力，減少服務端壓力。第二，速度快，無論哪種前端的實現方式，效能都是優於後端的。第三，實現方式簡單。後端實現水印的最大優勢也可以總結為三點，就是安全，安全，安全。知乎，微博都是採用後端實現的水印方案。但是綜合考慮，我們還是採用前端實現水印的方案。下面也會簡單介紹下 nodejs 怎麼實現後端圖片水印。
node實現
提供三個 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
var images = require（“images”）；images（“input。jpg”） //Load image from file //載入影象檔案 。size（400） //Geometric scaling the image to 400 pixels width //等比縮放影象到400畫素寬 。draw（images（“logo。png”）， 10， 10） //Drawn logo at coordinates （10，10） //在（10，10）處繪製Logo 。save（“output。jpg”， { //Save the image to a file， with the quality of 50 quality ： 50 //儲存圖片到檔案，圖片質量為50 }）；
不需要安裝其他工具，輕量級，zhangyuanwei 國人開發，中文文件；3，
jimp
：https：//github。com/oliver-moran/jimp可搭配 gifwrap 實現 gif 水印；
前端實現
1，背景圖實現全屏水印
可以到阿里內外個人資訊頁面檢視效果，原理：
優點：圖片是後端生成，安全；缺點：需要發起 http 請求，獲取圖片資訊；效果展示：由於是內部系統，不方便展示效果。
2，dom 實現全圖水印和圖片水印
在圖片的 onload 事件裡獲取圖片寬高，根據圖片大小生成水印區域，遮擋在圖片上層，dom 內容為水印的文案或者其他資訊，實現方式比較簡單。
const wrap = document。querySelector（‘#ReactApp’）；const { clientWidth， clientHeight } = wrap；const waterHeight = 120；const waterWidth = 180；// 計算個數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’）； // 動態設定偏移值 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）； }}
優點：簡單易實現；缺點：圖片過大或者過多會有效能影響；效果展示：
3，canvas 實現方式（第一版實現方案）方法一：直接在圖片上操作
廢話不多說，直接上程式碼
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； // 設定水印 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）； // 設定水印浮層 const pattern = context。createPattern（innerCanvas， ‘repeat’）； context。fillStyle = pattern； context。fill（）； } catch （err） { console。info（err）； setShowImg（true）； } }； image。onerror = function （） { setShowImg（true）； }； }， ［src］）；
優點：純前端實現方式，右鍵複製的圖片也是有水印的；缺點：不支援 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’）；}；// 使用方式 
優點：純前端實現方式，支援跨域，支援 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，”）`， }； 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 （
優點：支援 gif 圖水印，不存在跨域問題，使用 repeat 屬性，無插入 dom 過程，無效能問題；缺點：。。。dom 結構展示：
5，效果圖展示
canvas 和 svg 實現的效果在展示上沒有很大的區別，所以效果圖就一張圖全部展示了。
QA
問題一：
如果把 watermark 的 dom 刪除了，圖片不就是無水印了嗎？
答案：
可以利用 MutationObserver 監聽 water 的節點，如果節點被修改，圖片也隨之隱藏；
問題二：
滑鼠右鍵複製圖片？
答案：
全部的圖片都禁用了右鍵功能
問題三：
如果從控制檯的network獲取圖片資訊呢？
答案：
此操作暫時沒有想到好的解決辦法，建議採用後端實現方案
總結
前端實現的水印方案始終只是一種臨時方案，業務後端實現又耗費伺服器資源，其實最理想的解決方式就是提供一個獨立的水印服務，雖然載入過程中會略有延遲，但是相對與資料安全來說，毫秒級的延遲還是可以接受的，這樣又能保證不影響業務的服務穩定性。在每天的答疑過程中，也會有很多業務方來找我溝通水印遮擋風險點的問題，每次只能用資料安全的重要性來回復他們，當然，水印的大小，透明度，密集程度也都在不斷的調優中，相信會有一個版本，既能起到水印的作用，也能更好的解決遮擋問題。
