vue中将水印加在页面的某一部分

最新推荐文章于 2024-06-26 09:30:00 发布

不平凡中的平凡

最新推荐文章于 2024-06-26 09:30:00 发布

阅读量2.3k

点赞数

分类专栏： vue 文章标签： vue加水印

本文链接：https://blog.youkuaiyun.com/weixin_40667880/article/details/99060497

版权

vue 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一种使用JavaScript在网页特定区域添加水印的方法，包括动态调整水印位置及大小，确保水印覆盖指定元素而不影响页面交互。

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

页面某一部分加水印的js方法：

'use strict'
 
let watermark = {}
 
let setWatermark = (str) => {
  let id = '1.23452384164.123412415'
 
  if (document.getElementById(id) !== null) {
    document.body.removeChild(document.getElementById(id))
  }
 
  let can = document.createElement('canvas')
  can.width = 150
  can.height = 150
 
  let cans = can.getContext('2d')
  cans.rotate(-30 * Math.PI / 180)
  cans.font = '16px "Avenir", Helvetica, Arial, sans-serif'
  cans.fillStyle = 'rgba(200, 200, 200, 0.20)'
  cans.textAlign = 'left'
  cans.textBaseline = 'Middle'
  cans.fillText(str, can.width / 5, can.height / 2)
 
  let div = document.createElement('div')
  div.id = id
  div.style.pointerEvents = 'none'
  //水印的位置以及水印的宽高
  div.style.top = '40px'
  div.style.left = '-30px'
  div.style.position = 'absolute'
  div.style.zIndex = '100000'
  div.style.width = document.documentElement.clientWidth - 100 + 'px'
  //获取id为table元素的高度，动态展示水印的高度
  div.style.height = document.getElementById("table").clientHeight - 20 + 'px'
  div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat'
  // 将水印放在id为show的元素里面，解决水印整个页面展示的效果。
  document.getElementById("show").appendChild(div)
  return id
}
 
// 该方法只允许调用一次
watermark.set = (str) => {
  let id = setWatermark(str)
  setInterval(() => {
    if (document.getElementById(id) === null) {
      id = setWatermark(str)
    }
  }, 500)
  window.onresize = () => {
    setWatermark(str)
  }
}

export default watermark

在需要的页面中引入该js，并在mounted中加入watermark.set(“值”)，~~在不需要的页面中加入watermark.set("")，清除水印（因为水印设置一次，其他页面也会有水印）~~ 。示例如下：

mounted() {
    watermark.set("值")
}

补充，show的样式为position:relative;z-index: 99; 否则水印会全屏。

其他页面无水印的情况：

//有id为show时，添加水印。
if(document.getElementById("show")) {
	document.getElementById("show").appendChild(div)
}