水印效果

一、背景与问题

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

二、架构思想

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

水印代号 watermark

三、具体使用

在src/layout/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>

四、实现原理

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

/*
 * 水印
 * @Author:    1024创新实验室-主任：卓大
 * @lastUpdated:      2023-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;

联系我们

1024创新实验室-主任：卓大，混迹于各个技术圈，研究过计算机，熟悉点 java，略懂点前端。

1024创新实验室 致力于成为中原领先、国内一流的技术团队， 以AI+数字化为驱动，用技术为产业互联网提供无限可能， 业务如下:

• 教育领域（高职院校数字化、就业创业大数据平台、继续教育平台；在线教育系统、视频直播、题库等，包含：医学、应急管理、成考、专升本等）
• 供应链领域（网络货运平台、大宗贸易进销存ERP、物流管理TMS、B2B电商、仓储WMS、AI提效等）
• 中医领域（诊所数字化管理、互联网医院、AI辅助诊疗、中医适宜技术、在线云问诊、空中药房等）
• AI+软件领域（软件定制外包、开源技术、数据大屏、国产化改造、技术升级换代、人员外包、技术顾问、技术培训等）

加微信： 卓大 拉你入群，一起学习	公众号 ：六边形工程师 分享：赚钱、代码、生活	请 “1024创新实验室” 烩面里加肉 咖啡配胡辣汤,提神又饱腹	抖音 : 六边形工程师 直播：赚钱、代码、中医