vue 頁面新增水印的方法

1、建立乙個watermark.js檔案

let watermark ={}

let setwatermark = (str) =>
//建立乙個畫布
let can = document.createelement('canvas');
//設定畫布的長寬
can.width = 220;
can.height = 220;
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 = '30px';
div.style.left = '0px';
div.style.position = 'fixed';
div.style.zindex = '0';
div.style.width = document.documentelement.clientwidth + 'px';
div.style.height = document.documentelement.clientheight + 'px';
div.style.background = 'url(' + can.todataurl('image/png') + ') left top repeat';
return
id;}
//該方法只允許呼叫一次
watermark.set = (str) =>
}, 500);
window.onresize = () =>;
}export 
default watermark;

2、引用元件、呼叫方法

import watermark from "./watermark.js";

export default

},mounted() ,

};

vue網頁新增水印

水印新增方式 1.新建 watermark.js 內容如下 let watermarkoption let setwatermarkcontent content let ele document.createelement canvas ele.width 250ele.height 150let...

頁面如何新增水印？

最近做vue專案的時候，需要要求要在頁面中新增水印的效果，網上找了一些方法，具體操作如下 1 頁面中新增乙個檔案比如 watermark.ts,如下 const watermark any const setwatermark str any const can document.createele...

vue中使用 canvas給頁面新增水印

vue中使用canvas 給頁面新增水印 1.寫乙個公共的方法，放在專案utils資料夾中 watermark.js str傳入水印需要展示的文字，renderdom水印要加的盒子，預設body var watermark var setwatermark function str,renderdo...