水印相关功能

front/src/App.vue

@@ -1,8 +1,8 @@
 <!--
  * @Author: hisense.wuhongjian
  * @Date: 2022-05-06 11:12:00
- * @LastEditors: hisense.wuhongjian
+ * @LastEditors: Light
- * @LastEditTime: 2022-08-03 10:13:59
+ * @LastEditTime: 2022-11-16 10:21:49
  * @Description: 告诉大家这是什么
 -->
 <template>
@@ -13,56 +13,138 @@
   </div>
 </template>
 <script setup>
-import zhCN from 'ant-design-vue/es/locale/zh_CN'
+  import onWholeWaterMark from '@/utils/waterMark'
-import Cookies from 'js-cookie'
+  import * as moment from 'moment'
-import { onBeforeUnmount } from 'vue'
+  import { getUser } from '@/api/home'
-import { useRouter } from 'vue-router'
+  import { getCategoryTreePage } from '@/api/personalCenter'
-import mybus from '@/myplugins/mybus'
+  import zhCN from 'ant-design-vue/es/locale/zh_CN'
-const router = useRouter()
+  import Cookies from 'js-cookie'
+  import { onBeforeUnmount, onMounted, watch, nextTick } from 'vue'
+  import { useRouter } from 'vue-router'
+  import mybus from '@/myplugins/mybus'
+  const router = useRouter()
 
-const locale = zhCN
+  const locale = zhCN
-const token = Cookies.get('ucsToken')
+  const token = Cookies.get('ucsToken')
-console.log('token=================>', token)
+  console.log('token=================>', token)
-let ws = new WebSocket(
+  let ws = new WebSocket(
-  `ws://${window.SITE_CONFIG['websocketURL']}/websocket?token=${token}`
-)
-// ws.send()给服务器发送信息
-// 服务器每次返回信息都会执行一次onmessage方法
-ws.onmessage = function (e) {
-  console.log('WebSocket服务器返回的信息: ' + e.data)
-  mybus.emit('getMynotice')
-  // 判断当前路由是否是消息中心
-  if (router.currentRoute.value.name === 'mynoticeView') {
-    mybus.emit('noticeListInit')
-  }
-}
-ws.onerror = function (e) {
-  console.log('WebSocket连接异常============================>', e)
-  ws = new WebSocket(
     `ws://${window.SITE_CONFIG['websocketURL']}/websocket?token=${token}`
   )
-}
+  // ws.send()给服务器发送信息
-ws.onclose = function (e) {
+  // 服务器每次返回信息都会执行一次onmessage方法
-  console.log('WebSocket连接断开============================>', e)
+  ws.onmessage = function (e) {
-}
+    console.log('WebSocket服务器返回的信息: ' + e.data)
-onBeforeUnmount(() => {
+    mybus.emit('getMynotice')
-  // 4.卸载前, 关闭链接
+    // 判断当前路由是否是消息中心
-  ws.close()
+    if (router.currentRoute.value.name === 'mynoticeView') {
-})
+      mybus.emit('noticeListInit')
+    }
+  }
+  ws.onerror = function (e) {
+    console.log('WebSocket连接异常============================>', e)
+    ws = new WebSocket(
+      `ws://${window.SITE_CONFIG['websocketURL']}/websocket?token=${token}`
+    )
+  }
+  ws.onclose = function (e) {
+    console.log('WebSocket连接断开============================>', e)
+  }
+  let realName = '默认水印'
+  const arr = []
+  const changeWaterMark = (newValue) => {
+    console.log('监听', newValue, arr)
+    if (document.getElementById(realName.charCodeAt())) {
+      if (arr.indexOf(newValue) > -1) {
+        document.getElementById(realName.charCodeAt()).style.opacity = 1
+        document.getElementById(
+          moment().format('YYYY-MM-DD').charCodeAt()
+        ).style.opacity = 1
+      } else {
+        document.getElementById(realName.charCodeAt()).style.opacity = 0
+        document.getElementById(
+          moment().format('YYYY-MM-DD').charCodeAt()
+        ).style.opacity = 0
+      }
+    } else if (document.getElementById('默认水印'.charCodeAt())) {
+      if (arr.indexOf(newValue) > -1) {
+        document.getElementById('默认水印'.charCodeAt()).style.opacity = 1
+        document.getElementById(
+          moment().format('YYYY-MM-DD').charCodeAt()
+        ).style.opacity = 1
+      } else {
+        document.getElementById('默认水印'.charCodeAt()).style.opacity = 0
+        document.getElementById(
+          moment().format('YYYY-MM-DD').charCodeAt()
+        ).style.opacity = 0
+      }
+    }
+  }
+  const waterMarkInit = (newValue) => {
+    getUser().then((res) => {
+      if (res.data.code == 0) {
+        realName = res.data.data.realName
+      }
+      onWholeWaterMark(
+        [realName, moment().format('YYYY-MM-DD')],
+        600,
+        300,
+        30,
+        50
+      )
+      getCategoryTreePage({
+        page: 1,
+        limit: 999,
+        dictTypeId: '1592357067014803457',
+      }).then((res) => {
+        arr.length = 0
+        res.data.data.list.map((val) => {
+          arr.push(val.dictValue)
+        })
+        if (newValue) {
+          changeWaterMark(newValue)
+        }
+      })
+    })
+  }
+  watch(
+    () => router.currentRoute.value.path,
+    (newValue, oldValue) => {
+      console.log(
+        '路由变化',
+        newValue,
+        oldValue,
+        realName,
+        realName.charCodeAt()
+      )
+      // 如果刚登陆  初始化水印
+      if (oldValue == '/login' || oldValue == '/') {
+        waterMarkInit(newValue)
+      }
+      changeWaterMark(newValue)
+    },
+    { immediate: true }
+  )
+  onMounted(() => {
+    waterMarkInit()
+  })
+  onBeforeUnmount(() => {
+    // 4.卸载前, 关闭链接
+    ws.close()
+  })
 </script>
 <style lang="less">
-@import '~@/vab/styles/vab.less';
+  @import '~@/vab/styles/vab.less';
 
-#vue-admin-beautiful {
+  #vue-admin-beautiful {
-  max-width: 1920px;
+    max-width: 1920px;
-  // max-height: 1080px;
+    // max-height: 1080px;
-  margin: auto;
+    margin: auto;
-  height: 100%;
+    height: 100%;
-  position: relative;
+    position: relative;
-  background-color: #fff;
+    background-color: #fff;
-}
+  }
 
-body {
+  body {
-  font-size: 0.14rem;
+    font-size: 0.14rem;
-}
+  }
 </style>

front/src/utils/waterMark.js

@@ -0,0 +1,69 @@
+/*
+ * @Author: Light
+ * @Date: 2022-11-14 15:01:54
+ * @LastEditors: Light
+ * @LastEditTime: 2022-11-16 09:57:28
+ * @Description: 水印
+ */
+const watermark = {
+  timer: null,
+  set: () => {},
+}
+const setWatermark = (str, width, height, size, top, index) => {
+  console.log('生成水印')
+  const id = str.charCodeAt()
+  if (document.getElementById(id) !== null) {
+    document.body.removeChild(document.getElementById(id))
+  }
+  const can = document.createElement('canvas')
+  can.width = width
+  can.height = height
+
+  const cans = can.getContext('2d')
+  cans.rotate((-20 * Math.PI) / 180)
+  cans.font = size + 'px Microsoft YaHei'
+  cans.fillStyle = 'rgba(200, 200, 200, 0.4)'
+  cans.textAlign = 'left'
+  cans.textBaseline = 'middle'
+  cans.fillText(str, can.width / 3, can.height / 2)
+
+  const WATER_MARK = document.createElement('div')
+  const ALL_WIDTH = document.documentElement.clientWidth + 'px'
+  const ALL_HEIGHT = document.documentElement.clientHeight + 'px'
+
+  WATER_MARK.id = id
+  WATER_MARK.style.cssText = `
+    position: fixed;
+    top: ${index * top}px;
+    left: 0;
+    zIndex: 99999999;
+    pointer-events: none;
+    width: ${ALL_WIDTH};
+    height: ${ALL_HEIGHT};
+    background: url(${can.toDataURL('image/png')}) left top repeat;
+    opacity: 0;
+  `
+  document.body.appendChild(WATER_MARK)
+  return id
+}
+
+// 该方法只允许调用一次
+watermark.set = (str, width, height, size, top, index) => {
+  let id = setWatermark(str, width, height, size, top, index)
+  watermark.timer && clearTimeout(watermark.timer)
+  watermark.timer = setTimeout(() => {
+    if (document.getElementById(id) === null) {
+      id = setWatermark(str, width, height, size, top, index)
+    }
+  }, 300)
+  window.onresize = () => {
+    setWatermark(str, width, height, size, top, index)
+  }
+}
+
+const onWholeWaterMark = (arr, width, height, size, top) => {
+  arr.map((str, index) => {
+    watermark.set(str, width, height, size, top, index)
+  })
+}
+export default onWholeWaterMark