metabase網頁新增水印

新建乙個公共js檔案（setwatermark.js）

let watermark = {};

window.onload = function () ) => 
//建立乙個畫布
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';
return id;
};watermark.set = (str) => 
}, 500);
window.onresize = () => ;
};var personame = sessionstorage.getitem("person_name");
console.log(personame)
watermark.set(personame, );
}export default watermark;

import  from 'metabase/lib/watermark/setwatermark';

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...

react網頁新增水印

原理 在頁面覆蓋乙個盒子，取消滑鼠事件，層級最高，透明，用canvas，繪製背景 為了防止內部資料洩露，拍照等等，水印可以新增登入人姓名，公司名等等 借鑑大神的 let watermark letsetwatermark str,option 建立乙個畫布 let can document.crea...