《大前端 基礎組件》系列 80行實現一個網頁水印npm包

前言

Coding 應當是一輩子的事業，而不單單是 30 歲的青春飯
本文已收錄 GitHub https://github.com/ponkans/F2E，歡迎 Star，持續更新

網站瀏覽中，經常須要網頁水印，來防止用戶截圖或者錄屏暴露敏感信息後沒法追蹤用戶來源。好比釘釘、飛書等軟件，聊天背景會有你的花名。

水怪怪今天手把手帶你實現一個自定義水印的 npm 包，並發佈至 npm 倉庫。

思路

• 獲取標記信息，好比用戶名、用戶 ID 等（也就是你想打上水印的目標對象）
• 繪製水印，繪製工具咱們能夠採用 canvas

實現

建立一個 npm 項目

mkdir watermarkly && cd watermarkly
npm init
touch index.js
touch README.md
複製代碼

開放參數

• fontSize：水印字體大小
• color：水印字體顏色
• id：Canvas ID
• text：水印文案
• size：水印大小
• clarity：水印清晰度

建立畫布

根據 id 生成 canvas 畫布，若是沒有 id 參數傳入，則自動生成一個隨機字符串，防止和頁面其餘 DOM ID 衝突，若是已經存在該 id 對應的畫布，須要先清除再生成。

畫布大小爲可用屏幕大小。畫布 fix 固定在可視窗口，z-index 爲-1。

// 刪除已有畫布
let oldCanvas = document.getElementById(this.params.id);
if(oldCanvas){
    oldCanvas.parentNode.removeChild(oldCanvas);
}

// 建立畫布
let body = document.getElementsByTagName('body');
let width = window.screen.width;
let height = window.screen.height;
let canvas = document.createElement('canvas');

let id = this.params.id
if(!id){
    id = randomString(18);
}

// 設置畫布id
canvas.setAttribute('id', this.params.id); 
canvas.width = width * this.params.clarity;
canvas.height = height * this.params.clarity;
canvas.style.cssText= 'position: fixed;width: 100%;height: 100%;left:0;top:0;z-index: -1;';
body[0].appendChild(canvas);
複製代碼

填充畫布

• 計算 x 軸和 y 軸可展現水印個數，要作冗餘計算，防止出現邊界水印缺失

• 畫布逆時針旋轉 15 度

• 遍歷 x,y 依次繪製水印

let canvas = document.getElementById(this.params.id);
let cxt = canvas.getContext('2d');

let redundance = 10;
let xCount = window.screen.width * this.params.clarity / this.params.size + redundance;
let yCount = window.screen.height * this.params.clarity / this.params.size + redundance;

cxt.rotate(-15*Math.PI/180);


for(let i = 0; i < xCount; i++) {
  for(let j = 0; j < yCount; j++) {
    cxt.fillStyle = this.params.color;
    cxt.font = this.params.fontSize + ' Arial';
    cxt.fillText(this.params.text, this.params.density*(i-redundance/2), j*this.params.size); 
  }
}
複製代碼

安全鎖

怪怪我興致勃勃的寫好了組件給老大看，結果，被吐槽說不嚴謹！what ？發生了什麼？

兇手原來……

有點 coding 經驗的同窗，很容易經過各類騷操做抹掉水印，好比打開調試窗口刪除 canvas 或者修改 canvas 的樣式屬性。

因此咱們還須要對水印加安全鎖，提升安全等級。

• 能夠設置定時器，定時檢查水印狀態。

let self = this;
  window.setInterval(function(){
  let canvasDom = document.getElementById(self.params.id);            
  if (!canvasDom 
    || canvasDom.style.cssText !== 'position: fixed; width: 100%; height: 100%; left: 0px; top: 0px; z-index: -1;' 
    || canvasDom.width !== (window.screen.width * self.params.clarity)
    || canvasDom.height !==  (window.screen.height * self.params.clarity)) {
    self.init();
  }
}, 500);
複製代碼

發佈

• npm login
• npm publish

水印效果

npm i --save watermarkly
複製代碼

import Watermark from 'watermarkly';
new Watermark({
    text: 'test'
});
複製代碼

總結

本文已收錄 GitHub https://github.com/ponkans/F2E，歡迎 Star，持續更新

很常見的一個小需求，抽下班時間簡單寫了下，主要也是由於前幾天看到技術交流羣裏面一個小夥伴問了下，就順帶實現跟你們分享一把。

喜歡的小夥伴麻煩加個關注，點個在看哦，biubiubiu~

近期熱門原創推薦：

• 《吐血整理》系列 大廠前端組件庫工具集合（PC 端、移動端、JS、CSS 等）
• 《大前端進階 Node.js》系列 P6 必備腳手架/CI 構建能力
• 《吐血整理》系列 春招前端 17k 的水平 | 掘金技術徵文

---

公衆號後臺回覆【水印】，可獲取源代碼。

微信搜索【接水怪】或掃描下面二維碼回覆」加羣「，我會拉你進技術交流羣。講真的，在這個羣，哪怕您不說話，光看聊天記錄也是一種成長。（阿里技術專家、敖丙做者、Java3y、蘑菇街資深前端、螞蟻金服安全專家、各路大牛都在）。

接水怪也會按期原創，按期跟小夥伴進行經驗交流或幫忙看簡歷。加關注，不迷路，有機會一塊兒跑個步🏃 ↓↓↓