水印效果

11/7/2022

# 一、背景与问题

我们知道中后台一般都是企业内部使用,里面含有重要的信息,不可 拍照或者截图外传,那么这个时间水印就变得非常重要。
水印一般为:企业 + 部门 + 姓名 + 时间

# 二、架构思想

我们都知道 中后台一般左侧为 菜单,顶部为用户操作区,只有中间为具体的content内容区。所以水印我们只需要加在中间 content区域即可
在SmartAdmin中 中间的content 为layout,所以在 多个layout中进行水印操作;
水印我们可以单出抽成一个库lib,因为其与任何业务无关。

水印代号 watermark

# 三、具体使用

src/layout/smart-side-expand-layout.vue中我们加入水印,代码如下:

<script setup>
  import { computed, onMounted, ref } from 'vue';
  import watermark from '/@/lib/smart-wartermark';
  import { useAppConfigStore } from '/@/store/modules/system/app-config';
  import { useUserStore } from '/@/store/modules/system/user';
  import { HOME_PAGE_NAME } from '/@/constants/system/home-const';

  //页面初始化的时候加载水印
  onMounted(() => {
    watermark.set('smartAdminLayoutContent', useUserStore().actualName);
  });
</script>
1
2
3
4
5
6
7
8
9
10
11
12

# 四、实现原理

水印方法src/lib/smart-wartermark.js

/*
 * 水印
 * @Author:    1024创新实验室-主任:卓大
 * @Date:      2022-09-06 20:50:10
 * @Wechat:    zhuda1024
 * @Email:     lab1024@163.com
 * @Copyright  1024创新实验室 ( https://1024lab.net ),Since 2012
 */
import dayjs from 'dayjs';
/**
 *  水印DOM id
 */
const WATER_MARK_DOM_ID = 'smart_admin_water_mark';
let smartAdminWaterMarkIntervalId = null;
/**
 * 因为modal的z-index为1000,所以为了modal的黑色背景隐藏掉,z-index为 999
 */
function setWatermark(id, str) {
  //删掉之前的水印
  if (document.getElementById(WATER_MARK_DOM_ID) !== null) {
    document.getElementById(WATER_MARK_DOM_ID).remove();
  }
  str = str + ' ' + dayjs().format('YYYY-MM-DD HH:mm');
  //创建一个画布
  const can = document.createElement('canvas');
  //设置画布的长宽
  can.width = 400;
  can.height = 200;
  const cans = can.getContext('2d');
  //旋转角度
  cans.rotate((-15 * Math.PI) / 150);
  cans.font = '16px Microsoft JhengHei';
  //设置填充绘画的颜色、渐变或者模式
  cans.fillStyle = 'rgba(190, 190, 190, 0.30)';
  //设置文本内容的当前对齐方式
  cans.textAlign = 'left';
  //设置在绘制文本时使用的当前文本基线
  cans.textBaseline = 'middle';
  //在画布上绘制填色的文本(输出的文本,开始绘制文本的X坐标位置,开始绘制文本的Y坐标位置)
  cans.fillText(str, can.width / 8, can.height / 2);
  const div = document.createElement('div');
  div.id = WATER_MARK_DOM_ID;
  div.style.pointerEvents = 'none';
  div.style.top = '0px';
  div.style.left = '0px';
  div.style.position = 'absolute';
  div.style.zIndex = '999';
  div.style.width = '100%';
  div.style.height = '100%';
  div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat';
  document.getElementById(id).appendChild(div);
}

const watermark = {
  show: function () {
    document.getElementById(WATER_MARK_DOM_ID).style.display = 'block';
  },
  hide: function () {
    document.getElementById(WATER_MARK_DOM_ID).style.display = 'hide';
  },
  // 该方法只允许调用一次
  set: function (id, str) {
    // 如果存在水印,则不允许再调用了
    if (document.getElementById(WATER_MARK_DOM_ID) !== null) {
      alert('已经添加过全局水印了,请不要再重复添加!');
      return;
    }
    setWatermark(id, str);
    //每隔1分钟检查一次水印
    smartAdminWaterMarkIntervalId = setInterval(() => {
      setWatermark(id, str);
    }, 60000);

    window.onresize = () => {
      setWatermark(id, str);
    };
  },
  // 清空水印
  clear: function () {
    document.getElementById(WATER_MARK_DOM_ID).remove();
    window.removeEventListener('resize', setWatermark);
    if (smartAdminWaterMarkIntervalId) {
      clearInterval(smartAdminWaterMarkIntervalId);
    }
  },
};
export default watermark;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

# 联系我们

1024创新实验室-主任:卓大 (opens new window),混迹于各个技术圈,研究过计算机,熟悉点 java,略懂点前端。
1024创新实验室(河南·洛阳) (opens new window) 致力于成为中原领先、国内一流的技术团队,以技术创新为驱动,合作各类项目。

加 主任 “卓大” 微信
拉你入群,一起学习
关注 “小镇程序员”
分享代码与生活、技术与赚钱
请 “1024创新实验室” 喝咖啡
支持我们的开源与分享

告白气球 (钢琴版)
JESSE T