在utils資料夾中建立 wartermark.ts 檔案（位置看自己的元件放那，這都行），內容如下：
1 "use strict";23 const setwatermark = (str: any) =>910
//建立乙個畫布
11 const can = document.createelement("canvas");
12//
設定畫布的長寬
13 can.width = 250;
14 can.height = 120;
1516 const cans: any = can.getcontext("2d");
17//
旋轉角度
18 cans.rotate((-15 * math.pi) / 150);
19 cans.font = "18px vedana";
20//
設定填充繪畫的顏色、漸變或者模式
21 cans.fillstyle = "rgba(200, 200, 200, 0.30)";
22//
設定文字內容的當前對齊方式
23 cans.textalign = "left";
24//
設定在繪製文字時使用的當前文字基線
25 cans.textbaseline = "middle";
26//
在畫布上繪製填色的文字（輸出的文字，開始繪製文字的x座標位置，開始繪製文字的y座標位置）
27 cans.filltext(str, can.width / 8, can.height / 2);
2829 const div = document.createelement("div");
30 div.id =id;
31 div.style.pointerevents = "none";
32 div.style.top = "35px";
33 div.style.left = "0px";
34 div.style.position = "fixed";
35 div.style.zindex = "100000";
36 div.style.width = document.documentelement.clientwidth + "px";
37 div.style.height = document.documentelement.clientheight + "px";
38 div.style.background =
39 "url(" + can.todataurl("image/png") + ") left top repeat";
4041
return
id;42
};43 const watermark =
51 }, 500);
52 window.onresize = () =>;55}
56}57 export default watermark;
2、在api.vue檔案中引用 wartermark.ts
1
vue 專案通過vue指令新增水印
在vue專案中通過自定義指令，使用canvas特性生成base64格式的檔案，並將其設定為背景，從而實現頁面或元件區域性水印效果 1 新建directives.js import vue from vue vue.directive watermark el,binding addwatermark...
vue網頁新增水印
水印新增方式 1.新建 watermark.js 內容如下 let watermarkoption let setwatermarkcontent content let ele document.createelement canvas ele.width 250ele.height 150let...
iOS 新增水印
新增水印，這個需求要求調研時，因為是新的技術點，查閱了一些資料。資料中統統都說 獲取介面的rgb值，將需要加密的資訊翻譯成二進位制，通過位運算，新增到每個rgb值的二進位制末尾實現。解碼時線取介面的rgb二進位制值，通過位運算，得出加密資訊的二進位制即可。網上給了一些獲得介面rgb的方法，我按照其方...