aike/emis-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

md

Browse Source
This commit is contained in:
linfso 2024-02-22 12:04:56 +08:00
parent c93404da1f
commit 1a24725334
2 changed files with 18 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/layout/components/AppMain.vue
View File

@ -9,14 +9,11 @@
</template>
<script>
import watermark from "watermark-dom";
// import watermark from "watermark-dom";
import Watermark from '@/utils/watermark.js'
export default {
name: 'AppMain',
// mounted() {
// 加载水印
// const username = this.$store.state.user.name;
// watermark.load({ watermark_txt: username + "" });
// },
mounted() {
const username = this.$store.state.user.name;
// setInterval(() => {
@ -36,19 +33,21 @@ export default {
// }
// console.log("options", options);
options.w_texts = [username+"\r\n注意安全，敏感信息不可外传"];
watermark.load({
watermark_txt: options.w_texts.join("\r\n"), //水印的内容
watermark_color: "#e2e2e2", //水印字体颜色
watermark_fontsize: "12px", //水印字体大小
watermark_alpha: 0.4, //水印透明度，要求设置在大于等于0.005
watermark_angle: 30, //水印倾斜度数
watermark_width: 300, //水印宽度
watermark_height: 180, //水印长度
watermark_x: 100, //水印起始位置x轴坐标
watermark_y: 0,
watermark_rows: 5, //水印行数
watermark_cols: 1,
});
Watermark.set(options.w_texts.join("\r\n"));
// watermark.load({
// watermark_txt: options.w_texts.join("\r\n"), //水印的内容
// watermark_color: "#e2e2e2", //水印字体颜色
// watermark_fontsize: "12px", //水印字体大小
// watermark_alpha: 0.4, //水印透明度，要求设置在大于等于0.005
// watermark_angle: 30, //水印倾斜度数
// watermark_width: 300, //水印宽度
// watermark_height: 180, //水印长度
// watermark_x: 100, //水印起始位置x轴坐标
// watermark_y: 0,
// watermark_rows: 5, //水印行数
// watermark_cols: 1,
// });
},
computed: {
cachedViews() {

60
src/utils/wartermark.js
View File

@ -1,60 +0,0 @@
let watermark = {}
const idd = '1.234523841642.1234124163';
var _interval = null;
let setWatermark = (str) => {
let id = idd;
if (document.getElementById(id) !== null) {
document.body.removeChild(document.getElementById(id))
}
// 创建一个画布
let can = document.createElement('canvas')
// 设置画布的长宽
can.width = 100
can.height = 100
let cans = can.getContext('2d')
// 设置旋转角度
cans.rotate(-20 * Math.PI / 180)
cans.font = '14px Vedana'
// 设置填充绘画的颜色、渐变或者模式
cans.fillStyle = 'rgba(200, 200, 200, 0.70)'
// 设置文本内容的当前对齐方式
cans.textAlign = 'center'
// 设置在绘制文本时使用的当前文本基线
cans.textBaseline = 'Middle'
// 在画布上绘制填色的文本（输出的文本，开始绘制文本的X坐标位置，开始绘制文本的Y坐标位置）
cans.fillText(str, can.width / 3, can.height / 2)
let div = document.createElement('div')
div.id = id
div.style.pointerEvents = 'none'
div.style.top = '20px'
div.style.left = '0px'
div.style.position = 'fixed'
div.style.zIndex = '100000'
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'
document.body.appendChild(div)
return id
}
// 该方法只允许调用一次
// 添加水印的方法
watermark.set = (str) => {
let id = setWatermark(str);
_interval = setInterval(() => {
if (document.getElementById(id) === null) {
id = setWatermark(str);
}
}, 500);
window.onresize = () => {
setWatermark(str);
};
}
// 移除水印的方法
watermark.remove = () => {
if (document.getElementById(idd) !== null) {
var box = document.getElementById(idd);
box.parentNode.removeChild(box);
_interval ? clearInterval(_interval) : '';
}
}
export default watermark