在日常工作中，經常會遇到很多敏感的數據，為防止數據的洩露，我們要在數據上做一些」包裝「。目的就是讓那些有心洩露資料的」不法分子「迫於嚴重的」輿論壓力「而放棄不法行為，使之」犯罪未遂“，達到不戰而屈人之兵的效果。
在安全部門工作的我們，資料安全的觀念早已深入骨髓，每個文字，每張圖片，都要留心是否有洩露的風險，怎麼防止資料洩露，是我們一直在思考的問題。例如圖片的浮水印，就是我們工作過程中常涉及的問題。因為本身工作內容就是審核平台的開發，經常有一些風險圖片會在審核平台出現，考慮到審核人員的安全意識參差不齊，所以為防止不安全的事情發生，圖片增加水印的工作是必須要做的。
首先，考慮到業務場景，現階段的問題只是在審核過程中擔心資料的洩露，我們暫時只考慮顯式水印，既在圖片上增加一些可以區別你個人身分的文字或其他資料。這樣就可以做到根據洩漏的資料可以追蹤到個人，當然，未雨綢繆，防患於未然的警示功能才是它最主要。
實作方式
#水印的實作方式有很多，根據實作功能的人員分工可以分為前端浮水印和後端浮水印，前端浮水印的優點可以總結為三點，第一，可以不佔用伺服器資源，完全依賴客戶端的運算能力，減少服務端壓力。第二，速度快，無論哪一種前端的實作方式，效能都是優於後端的。第三，實作方式簡單。後端實現水印的最大優勢也可以總結為三點，就是安全，安全，安全。知乎，微博都是採用後端實現的水印方案。但綜合考慮，我們還是採用前端實現浮水印的方案。下面也會簡單介紹下 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
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);
}
}不需要安裝其他工具，輕量級，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('p');
// 动态设置偏移值
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);
}
}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]);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({})})` }} />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 (
<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="点击复制图片链接" />
: (
<>
<img onLoad={onLoad} referrerPolicy="no-referrer" onError={onError} src={src} alt="图片显示错误" />
<Icon className={styles.img_loading} type="loading" />
</>
)
}
</p>
);
};##QA
問題一：如果把watermark 的dom 刪除了，圖片不就是無浮水印了嗎？
答案：
可以利用MutationObserver 監聽water 的節點，如果節點被修改，圖片也隨之隱藏；
問題二：
滑鼠右鍵複製圖片？
答案：
全部的圖片都停用了右鍵功能
問題三：
如果從控制台的network取得圖片資訊呢？
答案：
此操作暫時沒有想到好的解決辦法，建議採用後端實作方案
前端實現的水印方案始終只是一種臨時方案，業務後端實現又耗費伺服器資源，其實最理想的解決方式就是提供一個獨立的水印服務，雖然加載過程中會略有延遲，但是相對與資料安全性來說，毫秒級的延遲還是可以接受的，這樣又能保證不影響業務的服務穩定性。
在每天的答疑過程中，也會有很多業務方來找我溝通水印遮擋風險點的問題，每次只能用資料安全的重要性來回复他們，當然，水印的大小，透明度，密集程度也都在不斷的調優中，相信會有一個版本，既能起到水印的作用，也能更好的解決遮擋問題。
推薦學習：html影片教學
以上是你知道前端是如何實現浮水印的嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章！
