react網頁新增水印

原理：

在頁面覆蓋乙個盒子，取消滑鼠事件，層級最高，透明，用canvas，繪製背景

為了防止內部資料洩露，拍照等等，水印可以新增登入人姓名，公司名等等

**：（借鑑大神的）

let watermark =

letsetwatermark
=(str, option =
)=>
//建立乙個畫布
let can = document.
createelement
('canvas');
//設定畫布的長寬
can.width = option.w ||
380;
can.height = option.h ||
200;
let cans = can.
getcontext
('2d');
//旋轉角度
cans.
rotate(-
15* math.pi/
180)
; cans.font =
'18px vedana'
;//設定填充繪畫的顏色、漸變或者模式
cans.fillstyle =
'rgba(200, 200, 200, 0.40)'
;//設定文字內容的當前對齊方式
cans.textalign =
'left'
;//設定在繪製文字時使用的當前文字基線
cans.textbaseline =
'middle'
;//在畫布上繪製填色的文字（輸出的文字，開始繪製文字的x座標位置，開始繪製文字的y座標位置）
cans.
filltext
(str, can.width /
8, can.height /2)
;let div = document.
createelement
('div');
div.id = id;
div.style.pointerevents =
'none'
; div.style.top = option.top ||
'100px'
; div.style.left = option.left ||
'180px'
; div.style.position =
'fixed'
; div.style.zindex =
'100000'
; div.style.width = option.width || document.documentelement.clientwidth +
'px'
; div.style.height = option.height || document.documentelement.clientheight +
'px'
; div.style.background =
'url('
+ can.
todataurl
('image/png')+
') left top repeat'
; document.body.
(div)
;return id;
}// 該方法只允許呼叫一次
watermark.
set=
(str)
=>},
500)
; window.
onresize=(
)=>;}
export
default watermark;

引用後，引數2 可以不傳，

l ,h為文字大小

left top為水印盒子定位

width height為水印盒子大小

可自定義增加其他屬性，比如填充顏色，字型大小等

watermark.

set(
'水印文字'
,)

js網頁新增水印

改編摘自 hjl 2017年6月19日19 25 43 function watermark settings 採用配置項替換預設值，作用類似jquery.extend if arguments.length 1 typeof arguments 0 object for key in src va...

給網頁新增水印

html js 改編摘自 hjl 2017年6月19日19 25 43 function watermark settings 採用配置項替換預設值，作用類似jquery.extend if arguments.length 1 typeof arguments 0 object for key i...

metabase網頁新增水印

新建乙個公共js檔案 setwatermark.js let watermark window.onload function 建立乙個畫布 let can document.createelement canvas 設定畫布的長寬 can.width option.w 380 can.height...