來源 | http://www.fly63.com/

為了防止信息泄露或知識產(chǎn)權(quán)被侵犯，在web的世界里，對于圖片文檔等增加水印處理是十分有必要的。水印的添加根據(jù)環(huán)境可以分為兩大類，前端瀏覽器環(huán)境添加和后端服務(wù)環(huán)境添加。

前端瀏覽器加水?。?/span>

減輕服務(wù)端的壓力，快速反應
安全系數(shù)較低，對于掌握一定前端知識的人來說可以通過各種騷操作跳過水印獲取到源文件
適用場景：資源不跟某一個單獨的用戶綁定，而是一份資源，多個用戶查看，需要在每一個用戶查看的時候添加用戶特有的水印，多用于某些機密文檔或者展示機密信息的頁面，水印的目的在于文檔外流的時候可以追究到責任人

后端服務(wù)器加水?。?/span>

當遇到大文件密集水印，或是復雜水印，占用服務(wù)器內(nèi)存、運算量，請求時間過長
安全性高，無法獲取到加水印前的源文件
適用場景：資源為某個用戶獨有，一份原始資源只需要做一次處理，將其存儲之后就無需再次處理，水印的目的在于標示資源的歸屬人

下面主要講解前端瀏覽器環(huán)境生成水印的幾種方式。

1、canvas 生成方式

canvas 有著不錯的兼容性，是一種比較可靠、成熟的可視化技術(shù)。但是它比較依賴分辨率，對文本的處理上也有著先天的不足。但是它可以很方便的將結(jié)果保存為圖片，對于完成水印的需求也是非常合適的。

為了方便使用者上手，我將所有的實現(xiàn)坐標都設(shè)置為top/left，以方便對x、y的設(shè)置。


export default class CanvasWay {    constructor(watermark) {        this.watermark = watermark        const {width, height} = watermark        this.canvas = document.createElement('canvas');        this.canvas.setAttribute('width', width);        this.canvas.setAttribute('height', height);    }
    render() {        const {txt, x, y, width, height, font, color, fontSize, alpha, angle} = this.watermark        const ctx = this.canvas.getContext('2d');        ctx.clearRect(0, 0, width, height);        ctx.textBaseline = 'top';        ctx.textAlign = 'left'        ctx.fillStyle = color;        ctx.globalAlpha = alpha;        ctx.font = `${fontSize}px ${font}`        ctx.translate(x, y)        ctx.rotate(Math.PI / 180 * angle);        ctx.translate(-x, -y - fontSize)        ctx.fillText(txt, x, y + fontSize);        return this.canvas.toDataURL();    }}

2、svg 生成方式

svg 與 canvas 相比瀏覽器兼容性幾乎一致，除了幾個早起的 Android 版本，這樣的設(shè)備以及很難找到了，完全可以忽略。svg 使用的是 XML 的方式，不依賴分辨率，在做水印這件事上 svg 有著更好的優(yōu)勢。

svg 的 text 屬性 x、y，是將文本左下位置定位到其坐標系的(x,y)位置，這可能和日常寫 css 的定位不同，所有需要有一個 dy 值，設(shè)置其偏移量。


export default class SvgWay {    constructor(watermark) {        this.watermark = watermark    }
    render() {        const {txt, x, y, width, height, color, font, fontSize, alpha, angle} = this.watermark        const svgStr =            `<svg xmlns="http://www.w3.org/2000/svg" width="${width}px" height="${height}px">                <text x="${x}px" y="${y}px" dy="${fontSize}px"                    text-anchor="start"                    stroke="${color}"                    stroke-opacity="${alpha}"                    fill="none"                    transform="rotate(${angle},${x} ${y})"                    font-weight="100"                    font-size="${fontSize}"                    font-family="${font}"                    >                    ${txt}                </text>            </svg>`;        return `data:image/svg+xml;base64,${window.btoa(unescape(encodeURIComponent(svgStr)))}`;    }}

總結(jié)

安全問題不能大意，對于一些比較敏感的內(nèi)容，我們可以通過組合使用上述的水印方案，這樣才能最大程度給瀏覽者警示的作用，減少泄密的情況，即使泄密了,也有可能追蹤到泄密者。

逆鋒起筆是一個專注于程序員圈子的技術(shù)平臺，你可以收獲最新技術(shù)動態(tài)、最新內(nèi)測資格、BAT等大廠的經(jīng)驗、精品學習資料、職業(yè)路線、副業(yè)思維，微信搜索逆鋒起筆關(guān)注！

2 種實現(xiàn)圖片加水印的方式

1、canvas 生成方式

2、svg 生成方式

總結(jié)

學習更多技能
請點擊下方公眾號

2 種實現(xiàn)圖片加水印的方式

1、canvas 生成方式

2、svg 生成方式

總結(jié)

學習更多技能請點擊下方公眾號

1、canvas 生成方式

2、svg 生成方式

學習更多技能
請點擊下方公眾號