頁面如何新增水印?

2021-10-23 05:41:15 字數 1538 閱讀 2711

最近做vue專案的時候,需要要求要在頁面中新增水印的效果,網上找了一些方法,具體操作如下:

(1)頁面中新增乙個檔案比如 watermark.ts, **如下: 

const watermark: any = {};

const setwatermark = (str: any) =>

const can = document.createelement('canvas');

can.width = 400;

can.height = 200;

const cans: any = can.getcontext('2d');

cans.rotate((-30 * math.pi) / 180); // 畫布裡面文字的旋轉角度

cans.font = '12px microsoft jhenghei'; // 畫布裡面文字的字型

cans.fillstyle = 'rgba(17, 17, 17, 0.3)'; // 畫布裡面文字的顏色

cans.textalign = 'center'; // 畫布裡面文字的水平位置

cans.textbaseline = 'hanging'; // 畫布裡面文字的垂直位置

cans.lineheight = 400;

cans.filltext(str, can.width / 3, can.height / 2); // 畫布裡面文字的間距比例

const div = document.createelement('div');

div.id = id;

div.style.pointerevents = 'none';

div.style.overflow = 'hidden';

div.style.opacity = '0.3';

div.style.top = '64px';

div.style.left = '0px';

div.style.position = 'fixed';

div.style.zindex = '99999999';

div.style.width = document.documentelement.clientwidth + 'px';

div.style.height = document.documentelement.clientheight + 'px';

div.style.background = `url($) repeat`;

return id;

};// 該方法只允許呼叫一次

watermark.set = (str: any) =>

}, 2000);

window.onresize = () => ;

};export default watermark;

(2)在要使用的地方引入並使用即可:

// layout.vue

import watermark from './mark';

mounted() - $`);

}

js為頁面元素新增水印

近期有需求為頁面部分區域新增上水印,通過在網上找到了js為頁面新增水印的方法,後來經過自己的改進,可以實現為頁面部分元素新增水印,最終效果如下圖 如下 function watermark settings 採用配置項替換預設值,作用類似jquery.extend if arguments.leng...

vue 頁面新增水印的方法

1 建立乙個watermark.js檔案 let watermark let setwatermark str 建立乙個畫布 let can document.createelement canvas 設定畫布的長寬 can.width 220 can.height 220 let cans can...

iOS 新增水印

新增水印,這個需求要求調研時,因為是新的技術點,查閱了一些資料。資料中統統都說 獲取介面的rgb值,將需要加密的資訊翻譯成二進位制,通過位運算,新增到每個rgb值的二進位制末尾實現。解碼時線取介面的rgb二進位制值,通過位運算,得出加密資訊的二進位制即可。網上給了一些獲得介面rgb的方法,我按照其方...