解决网页加水印只有第一屏可见的问题

最新推荐文章于 2024-03-26 18:14:53 发布

打盹的小pig

最新推荐文章于 2024-03-26 18:14:53 发布

阅读量786

点赞数

分类专栏： JavaScript CSS Vue 文章标签：第一屏网页加水印 js

本文链接：https://blog.csdn.net/bigbigpigsobig/article/details/119183322

版权

JavaScript 同时被 3 个专栏收录

20 篇文章 0 订阅

订阅专栏

Vue

16 篇文章 0 订阅

订阅专栏

CSS

3 篇文章 0 订阅

订阅专栏

网页加水印，很常见，市面上也成熟，随手拈来。

之后会发现有个小问题：只有网页的第一屏有水印，页面内容过多出现滚动条的时候，页面底部没水印；同理，当有横向滚动条的时候，页面的右边也没水印。解决问题如下：

新建一个waterMark.js文件


let watermark = {}

let setWatermark = (name, width, height) => {
  let id = '1.23452384164.123412415'
 
  if (document.getElementById(id) !== null) {
    document.body.removeChild(document.getElementById(id))
  }
 
  let can = document.createElement('canvas')
  can.width = 300
  can.height = 250
 
  let cans = can.getContext('2d')
  cans.rotate(-40 * Math.PI / 180) //水印倾斜
  cans.font = '14px Vedana'
  cans.fillStyle = '#bfbfbf'   // 字体颜色
  cans.textAlign = 'left'
  cans.textBaseline = 'Middle'
  cans.fillText(name, 15, 60)    //第一行字体
 
  let div = document.createElement('div')
  div.id = id
  div.style.pointerEvents = 'none'
  div.style.top = '150px'
  div.style.left = '0px'
  div.style.opacity = 0.5    //调节字体颜色的深浅
  div.style.position = 'absolute'
  div.style.zIndex = '9'
  div.style.width = document.body.offsetWidth + width - 20 + 'px'
  div.style.height = document.body.clientHeight + height - 150 + 'px'
  div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat'
  document.body.appendChild(div)
  return id
}
 
watermark.set = (name, scrollLeft, scrollTop) => {
  let id = setWatermark(name, scrollLeft, scrollTop)
  setInterval(() => {
    if (document.getElementById(id) === null) {
      id = setWatermark(name, scrollLeft, scrollTop)
    }
  }, 500)
  // window.onresize = () => {
  //   setWatermark(name, scrollLeft, scrollTop)
  // }
window.onresize = () => {
    setWatermark(name, scrollLeft, scrollTop)
  }
}
 
export default watermark

使用：permission.js文件引入

import watermark from './waterMark';

router.afterEach(() => {
  watermark.set(store.getters.name, 0, 0) //第一个参数是水印的内容，第二个参数是横向滚动距离，第三个是纵向滚动距离
  NProgress.done()
})

注意注意：不要在main.js引入，因为登录后进入页面不会展示水印，需要刷新才会展示

监听页面的滚动事件：获取纵向和横向滚动的距离，
permisssion.js文件

window.onscroll =function() {
  let scrollTop = 0;
  let scrollLeft = 0;
  //为了保证兼容性，这里取两个值，哪个有值取哪一个
  //scrollTop是触发滚轮事件时滚轮的高度
  scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;

  watermark.set(store.getters.name, scrollLeft, scrollTop)
}