前端水印（局部添加）

最新推荐文章于 2024-07-09 16:20:25 发布

Dreamingnini

最新推荐文章于 2024-07-09 16:20:25 发布

阅读量454

点赞数

分类专栏：前端开发文章标签：前端 javascript html vue.js

本文链接：https://blog.csdn.net/dreamingnini/article/details/127122953

版权

前端开发专栏收录该内容

5 篇文章 0 订阅

订阅专栏

这篇博客分享了一段JavaScript代码，用于在前端页面上实现局部水印效果。代码创建了一个名为watermark的对象，包含一个set方法，该方法接受内容和容器两个参数，能够在指定的容器内添加水印。水印内容可以自定义，并且能够根据页面大小变化动态调整。此外，代码还处理了防止文本被选中复制的问题，确保水印稳定显示。

摘要由CSDN通过智能技术生成

前端页面添加局部水印

之前找了很多水印的代码，都多少有问题，出现过在当前页面引入但是会在全局出现的情况，也出现过只在页面第一次加载过程中才会出现水印的情况，最终下面这个是可以实现局部水印的，参考的别人的原贴的链接找不到了

// 注释的代码是在调用组件里面写的  用于调用传参
//mounted() {
//要加水印的地方的ref是set函数的第2个参数
//   watermark.set(this.loginName,this.$refs.hello);
//   console.log(watermark)
//  },
// computed: {
//   showDistributionAgencyName: function () {
//    let str = this.comprehensiveQueryForm.distributionAgencyName.join(', ');
//    return str;
//   },
//   ...mapGetters(['loginName'])  //必须写在computed里面
//  },
'use strict'

const watermark = {}

/**
 *
 * @param {要设置的水印的内容} str
 * @param {需要设置水印的容器} container
 */
// 禁止复制文本
document.onselectstart = function () { return false; }
const setWatermark = (str, container) => {
 const id = '1.23452384164.123412415'

 if (container === undefined) {
  return
 }
 // 查看页面上有没有，如果有则删除
 if (document.getElementById(id) !== null) {
  const childelement = document.getElementById(id)
  childelement.parentNode.removeChild(childelement)
 }

 var containerWidth = container.offsetWidth // 获取父容器宽
 var containerHeight = container.offsetHeight // 获取父容器高
 container.style.position = 'relative' // 设置布局为相对布局
 // 创建canvas元素(先制作一块背景图)
 const can = document.createElement('canvas')
 can.width = 180 // 设置每一块的宽度
 can.height = 80 // 高度
 const cans = can.getContext('2d') // 获取canvas画布
 cans.rotate(-20 * Math.PI / 180) // 逆时针旋转π/9
 cans.font = '20px Vedana' // 设置字体
 cans.fillStyle = 'rgba(200, 200, 200, 0.5)' // 设置字体的颜色
 cans.textAlign = 'left' // 文本对齐方式
 cans.textBaseline = 'Middle' // 文本基线
 cans.fillText(str, 0, 4 * can.height / 5) // 绘制文字

 // 创建一个div元素
 const div = document.createElement('div')
 div.id = id // 设置id
 div.style.pointerEvents = 'none' // 取消所有事件
 div.style.top = '0px'
 div.style.left = '0px'
 // div.style.opacity=1    //调节字体颜色的深浅
 div.style.position = 'absolute'
 div.style.zIndex = '100000'
 div.style.width = containerWidth + 'px'
 div.style.height = containerHeight + 'px'
 div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat'
 container.appendChild(div) // 追加到页面

 return id
}

// 该方法只允许调用一次
watermark.set = (str, container) => {
 let id = setWatermark(str, container)
 setInterval(() => {
  if (document.getElementById(id) === null) {
   id = setWatermark(str, container)
  }
 }, 500)
 // 监听页面大小的变化
 window.onresize = () => {
  setWatermark(str, container)
 }
}

export default watermark