h5添加水印

最新推荐文章于 2024-04-03 09:35:44 发布

原创最新推荐文章于 2024-04-03 09:35:44 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

JavaScript 同时被 2 个专栏收录

32 篇文章

订阅专栏

CSS

15 篇文章

订阅专栏

本文介绍了一种利用JavaScript和Vue实现的动态网页水印技术，该技术可以根据用户信息生成带有工号和姓名的水印，并支持每分钟自动更新显示的时间戳。通过设置水印的透明度和旋转角度，确保其不影响用户体验的同时起到版权保护的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.创建一个js文件

import dayjs from 'dayjs'
const ID = '1.23452384164.123412415'
const WIDTH = 300;
const HEIGHT = 150;

//获取像素比
const getPixelRatio = function (context) {

  var backingStore = context.backingStorePixelRatio ||

    context.webkitBackingStorePixelRatio ||

    context.mozBackingStorePixelRatio ||

    context.msBackingStorePixelRatio ||

    context.oBackingStorePixelRatio ||

    context.backingStorePixelRatio || 1;

  return (window.devicePixelRatio || 1) / backingStore;

};
let setWatermark = (str1, str2, str3) => {
  let id = ID
  if (document.getElementById(id) !== null) {
    document.body.removeChild(document.getElementById(id))
  }
  let canvas = document.createElement('canvas')
  // canvas.style.width = WIDTH 
  // canvas.style.height = HEIGHT

  let ctx = canvas.getContext('2d')
  const ratio = getPixelRatio(ctx);
  console.log('ration======',ratio);
  canvas.width = WIDTH * ratio;
  canvas.height = HEIGHT * ratio;
  // ctx.rotate(-30 * Math.PI / 180)
  ctx.font = 12 * ratio + 'px -apple-system, BlinkMacSystemFont,PingFang SC, Microsoft YaHei, Arial Regular'
  // ctx.fillStyle = '#666666'
  ctx.fillStyle = '#696969'
  ctx.textAlign = 'center'
  ctx.textBaseline = 'Middle'
  str1 && ctx.fillText(str1, (WIDTH / 2) * ratio, HEIGHT * ratio/2)
  str2 && ctx.fillText(str2, (WIDTH / 2) * ratio, HEIGHT * ratio + 20)
  str3 && ctx.fillText(str3, (WIDTH / 2) * ratio, HEIGHT * ratio + 40)


  let div = document.createElement('div')
  div.id = id
  div.style.pointerEvents = 'none'
  // div.style.top = '20px'
  // div.style.left = '0px'
  div.style.opacity = '0.2'
  div.style.position = 'fixed'
  div.style.width = document.documentElement.clientWidth * 2 + 'px'
  div.style.height = document.documentElement.clientHeight * 2 + 'px'
  div.style.top = '-200px';
  div.style.left = '-200px';
  div.style.background = 'url(' + canvas.toDataURL('image/png') + ') left top repeat'
  div.style.backgroundSize = `${WIDTH}px ${HEIGHT}px`;
  div.style.transform = "rotate(-35deg)"
  document.body.appendChild(div)
  return id
}
let interval = null; //定时器
const changeText = (str1, str2, str3) => {
  const time = dayjs().format('YYYY/MM/DD HH:mm');
  if (document.getElementById(ID) !== null) {
    document.body.removeChild(document.getElementById(ID))
  }
  setWatermark(`${str1}-${time}`, str2, str3)
}
// 添加水印
export const setWaterMark = (str1, str2, str3) => {
  changeText(str1, str2, str3)
  interval = window.setInterval(()=>{changeText(str1, str2, str3)}, 60000)
}
// 移除水印
export const removeWatermark = () => {
  let id = ID
  if (document.getElementById(id) !== null) {
    document.body.removeChild(document.getElementById(id))
  }
  interval && window.clearInterval(interval)
}

此的水印结构为工号-姓名-yyyy/mm-dd HH：MM

2.以Vue全局引入为例在文件中引入

<template>
  <div id="app">
    <keep-alive>
    <router-view v-if="$route.meta.keepAlive"/>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"/>

  </div>
</template>
<script>
import {setWaterMark, removeWatermark} from '@/utils/water-mark.js';
export default {
 name: 'WdclHrGalaxyFrontApp',
  computed: {
     //获取员工工号和姓名字符串
    text(){
      const {userName='', userNo=''} = JSON.parse(sessionStorage.getItem('aesInfo'))||{};
      return userNo?`${userNo}-${userName}`:'';
    }
  },
  mounted() {
    this.setGloblWaterMark();
  },
  watch: {
    text(n){
      n && this.setGloblWaterMark()
    }
  },
  methods: {
    //设置全局水印
    setGloblWaterMark(){
      const {text} = this;
      text && setWaterMark(text);
    }
  },
  beforeDestroy(){
    removeWatermark()
  }
};
</script>
<style lang="less" scoped>
#app {
  .wh(100%;100vh);
}
</style>

ok～～～～