【W(wǎng)eb技術(shù)】談?wù)勊?shí)現(xiàn)的幾種方式

遇到問題

日常工作中，經(jīng)常會(huì)遇到很多敏感的數(shù)據(jù)，為防止數(shù)據(jù)的泄露，我們要在數(shù)據(jù)上做一些”包裝“。目的就是讓那些有心泄露數(shù)據(jù)的”不法分子“迫于嚴(yán)重的”輿論壓力“而放棄不法行為，使之”犯罪未遂“，達(dá)到不戰(zhàn)而屈人之兵的效果。而在安全部門工作的我們，數(shù)據(jù)安全的觀念早已深入骨髓，每個(gè)文字，每張圖片，都要留心是否有泄露的風(fēng)險(xiǎn)，怎么防止數(shù)據(jù)泄露，是我們一直思考的問題。比如圖片的水印，就是我們工作過程中經(jīng)常涉及到的問題。因?yàn)楸旧砉ぷ鲀?nèi)容就是審核平臺(tái)的開發(fā)，經(jīng)常有一些風(fēng)險(xiǎn)圖片會(huì)在審核平臺(tái)出現(xiàn)，考慮到審核人員的安全意識(shí)參差不齊，所以為防止不安全的事情發(fā)生，圖片增加水印的工作是必須要做的。

分析問題

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

解決問題

實(shí)現(xiàn)方式

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

node實(shí)現(xiàn)

提供三個(gè) npm 包，本部分不是我們文章的重點(diǎn)，只提供簡單的 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????????????????????//保存圖片到文件,圖片質(zhì)量為50
????});

不需要安裝其他工具，輕量級(jí)，zhangyuanwei 國人開發(fā)，中文文檔；3，jimp：https://github.com/oliver-moran/jimp可搭配 gifwrap 實(shí)現(xiàn) gif 水印；

前端實(shí)現(xiàn)

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

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

優(yōu)點(diǎn)：圖片是后端生成，安全；缺點(diǎn)：需要發(fā)起 http 請(qǐng)求，獲取圖片信息；效果展示：由于是內(nèi)部系統(tǒng)，不方便展示效果。

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

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

const?wrap?=?document.querySelector('#ReactApp');
const?{?clientWidth,?clientHeight?}?=?wrap;
const?waterHeight?=?120;
const?waterWidth?=?180;
//?計(jì)算個(gè)數(shù)
const?[columns,?rows]?=?[~~(clientWidth?/?waterWidth),?~~(clientHeight?/?waterHeight)]
for?(let?i?=?0;?i?????for?(let?j?=?0;?j?<=?rows;?j++)?{
????????const?waterDom?=?document.createElement('div');
????????//?動(dòng)態(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?=?'測(cè)試水印';
????????wrap.appendChild(waterDom);
????}
}

優(yōu)點(diǎn)：簡單易實(shí)現(xiàn)；缺點(diǎn)：圖片過大或者過多會(huì)有性能影響；效果展示：

3，canvas 實(shí)現(xiàn)方式（第一版實(shí)現(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)點(diǎn)：純前端實(shí)現(xiàn)方式，右鍵復(fù)制的圖片也是有水印的；缺點(diǎn)：不支持 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"?/>
<div?className="warter-mark-area"?style={{?backgroundImage:?`url(${getBase64Background({})})`?}}?/>

優(yōu)點(diǎn)：純前端實(shí)現(xiàn)方式，支持跨域，支持 git 圖水印；缺點(diǎn)：生成的 base64 url 比較大；效果展示：下文給出。其實(shí)根據(jù)這兩種 canvas 的實(shí)現(xiàn)方式可以輕松的想出第三種方式，就是在圖片的上層遮一層 第一方法中的非圖片的 canvas，這樣就能完美的避免兩種方案的缺點(diǎn)。但是停留片刻想一下，兩種方案的結(jié)合，還是使用 canvas 去繪制，是不是有更簡單易懂的方式呢。對(duì)，用 svg 替代。

4，SVG 方式（正在使用的方案）給出一個(gè) 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,${text}")`,
??};
??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?(
????
??????>
??????{isError
???????????showSrc={showSrc}?height={propsHeight}?text="圖片加載錯(cuò)誤"?helpText="點(diǎn)擊復(fù)制圖片鏈接"?/>
????????:?(
??????????<>
????????????
????????????
??????????
????????)
??????}
????