admin/wisdomisitezwfront-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 水印功能修改

Browse Source
This commit is contained in:
kun 2023-09-21 18:59:10 +08:00
parent ce295cc521
commit b970a8ebf8
1 changed files with 8 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/directives/modules/waterMarker.ts
View File

@ -20,14 +20,9 @@ let style = `
background-repeat: repeat;
pointer-events: none;
`;
let str: string = "";
let font: any = null;
let textColor: string = "";
import type { Directive, DirectiveBinding } from "vue";
const addWaterMarker = (parentNode: any, binding: { str: string; font: any; textColor: string }) => {
str = str || "";
font = font || "16px Microsoft JhengHei";
textColor = textColor || "rgba(180, 180, 180, 0.3)";
const addWaterMarker = (parentNode: any, binding: any = {}) => {
console.log(binding);
// 水印文字，父元素，字体，文字颜色
let can: HTMLCanvasElement = document.createElement("canvas");
parentNode.appendChild(can);
@ -36,11 +31,11 @@ const addWaterMarker = (parentNode: any, binding: { str: string; font: any; text
can.style.display = "none";
let cans = can.getContext("2d") as CanvasRenderingContext2D;
cans.rotate((-20 * Math.PI) / 180);
cans.font = font || "16px Microsoft JhengHei";
cans.fillStyle = textColor || "rgba(180, 180, 180, 0.3)";
cans.font = binding.font || "16px Microsoft JhengHei";
cans.fillStyle = binding.textColor || "rgba(180, 180, 180, 0.3)";
cans.textAlign = "left";
cans.textBaseline = "Middle" as CanvasTextBaseline;
cans.fillText(str, can.width / 10, can.height / 2);
cans.fillText(binding.text, can.width / 10, can.height / 2);
// 创建waterMark父元素
const waterMark = document.createElement("div");
@ -56,8 +51,9 @@ const addWaterMarker = (parentNode: any, binding: { str: string; font: any; text
const waterMarker = {
mounted(el: HTMLElement, binding: any) {
console.log(666);
// addWaterMarker(binding.value.text, el, binding.value.font, binding.value.textColor);
el.onload = init.bind(el, binding);
el.onload = init(el, binding);
}
};
@ -85,6 +81,7 @@ const createObserver = (el: HTMLElement, binding: any) => {
});
};
const init = (el: HTMLElement, binding: any = {}) => {
console.log(666);
// 设置水印
addWaterMarker(el, binding.value);
// 启动监控