怎么用JS实现覆盖水印效果

这篇“怎么用JS实现覆盖水印效果”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“怎么用JS实现覆盖水印效果”文章吧。

创新互联公司服务项目包括南雄网站建设、南雄网站制作、南雄网页制作以及南雄网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，南雄网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到南雄省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

一、效果

处理之前

处理之后

这里添加 “水印”（其实并不是真正的水印） 到 DIV 的时候按钮点击事件并不会因为有蒙版遮挡而无法点击

二、JS 代码

class WaterMark{
   //水印文字
   waterTexts = []
   //需要添加水印的dom集合
   needAddWaterTextElementIds = null
   //保存添加水印的dom
   saveNeedAddWaterMarkElement = []
   //初始化
   constructor(waterTexts,needAddWaterTextElementIds){
       if(waterTexts && waterTexts.length != 0){
           this.waterTexts = waterTexts
       } else {
           this.waterTexts = ['水印文字哈哈哈哈','2022-12-08']
       }
       this.needAddWaterTextElementIds = needAddWaterTextElementIds
   }
   
   //开始添加水印
   startWaterMark(){
       const self = this
       if(this.needAddWaterTextElementIds){
           this.needAddWaterTextElementIds.forEach((id)=>{
               let el = document.getElementById(id)
               self.saveNeedAddWaterMarkElement.push(el)
           })
       } else {
           this.saveNeedAddWaterMarkElement = Array.from(document.getElementsByTagName('img'))
       }
       this.saveNeedAddWaterMarkElement.forEach((el)=>{
           self.startWaterMarkToElement(el)
       })
   }

   //添加水印到到dom对象
   startWaterMarkToElement(el){
       let nodeName = el.nodeName
       if(['IMG','img'].indexOf(nodeName) != -1){
           //图片，需要加载完成进行操作
           this.addWaterMarkToImg(el)
       } else {
           //普通，直接添加
           this.addWaterMarkToNormalEle(el)
       }
   }
       
   //给图片添加水印
   async addWaterMarkToImg(img){
       if(!img.complete){
           await new Promise((resolve)=>{
               img.onload = resolve
           })
       }
       this.addWaterMarkToNormalEle(img)
   }
   
   //给普通dom对象添加水印
   addWaterMarkToNormalEle(el){
       const self = this
       let canvas = document.createElement('canvas')
       canvas.width = el.width ? el.width : el.clientWidth
       canvas.height = el.height ? el.height : el.clientHeight
       let ctx = canvas.getContext('2d')
       let maxSize = Math.max(canvas.height, canvas.width)
       let font = (maxSize / 25)
       ctx.font = font + 'px "微软雅黑"'
       ctx.fillStyle = "rgba(195,195,195,1)"
       ctx.textAlign = "left"
       ctx.textBaseline = "top"
       ctx.save()
       let angle = -Math.PI / 10.0
       //进行平移，计算平移的参数
       let translateX = (canvas.height) * Math.tan(Math.abs(angle))
       let translateY = (canvas.width - translateX) * Math.tan(Math.abs(angle))
       ctx.translate(-translateX / 2.0, translateY / 2.0)
       ctx.rotate(angle)
       //起始坐标
       let x = 0
       let y = 0
       //一组文字之间间隔
       let sepY = (font / 2.0)
       while(y < canvas.height){
           //当前行的y值
           let rowCurrentMaxY = 0
           while(x < canvas.width){
               let totleMaxX = 0
               let currentY = 0
               //绘制水印
               this.waterTexts.forEach((text,index)=>{
                   currentY += (index * (sepY + font))
                   let rect = self.drawWater(ctx,text,x,y + currentY)
                   let currentMaxX = (rect.x + rect.width)
                   totleMaxX = (currentMaxX > totleMaxX) ? currentMaxX: totleMaxX
                   rowCurrentMaxY = currentY
               })
               x = totleMaxX + 20
           }
           //重置x，y值
           x = 0
           y += (rowCurrentMaxY + (sepY + font + (canvas.height / 5)))
       }
       ctx.restore()
       //添加canvas
       this.addCanvas(canvas,el)
   }

   //绘制水印
   drawWater(ctx,text,x,y){
       //绘制文字
       ctx.fillText(text,x,y)
       //计算尺度
       let textRect = ctx.measureText(text)
       let width = textRect.width
       let height = textRect.height
       return {x,y,width,height}
   }

   //添加canvas到当前标签的父标签上
   addCanvas(canvas,el){
       //创建div(canvas需要依赖一个div进行位置设置)
       let warterMarDiv = document.createElement('div')
       //关联水印dom对象
       el.warterMark = warterMarDiv
       //添加样式
       this.resetCanvasPosition(el)
       //添加水印
       warterMarDiv.appendChild(canvas)
       //添加到父标签
       el.parentElement.insertBefore(warterMarDiv,el)
   }

   //重新计算位置
   resetCanvasPosition(el){
       if(el.warterMark){
           //设置父标签的定位
           el.parentElement.style.cssText = `position: relative;`
           //设施水印载体的定位
           el.warterMark.style.cssText = 'position: absolute;top: 0px;left: 0px;pointer-events:none'
       }
   }
}

用法

   
   


let waterMark = new WaterMark()
waterMark.startWaterMark();

ctx.save()与 ctx.restore()其实在这里的作用不是很大，但还是添加上了，目的是保存添加水印前的上下文，跟结束绘制后恢复水印前的上下文，这样，这些斜体字只在这两行代码之间生效，下面如果再绘制其他，那么，将不受影响。

防止蒙版水印遮挡底层按钮或其他事件，需要添加 pointer-events:none属性到蒙版标签上。

添加水印的标签外需要添加一个 父标签，这个 父标签的作用就是添加约束 蒙版canvas的位置，这里想通过 MutationObserver观察 body的变化来进行更新 蒙版canvas的位置，这个尝试失败了，因为复杂的布局只要变动会都在这个回调里触发。因此，直接在添加水印的标签外需要添加一个 父标签，用这个 父标签来自动约束 蒙版canvas的位置。

MutationObserver逻辑如下，在监听回调里可以及时修改布局或者其他操作（暂时放弃）。

var MutationObserver = window.MutationObserver || window.webkitMutationObserver || window.MozMutationObserver;
var mutationObserver = new MutationObserver(function (mutations) {
   //修改水印位置
})

mutationObserver.observe(document.getElementsByTagName('body')[0], {
   childList: true, // 子节点的变动（新增、删除或者更改）
   attributes: true, // 属性的变动
   characterData: true, // 节点内容或节点文本的变动
   subtree: true // 是否将观察器应用于该节点的所有后代节点
})

图片的大小只有在加载完成之后才能确定，所以，对于 IMG的操作，需要观察它的 complete事件。

以上就是关于“怎么用JS实现覆盖水印效果”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注创新互联行业资讯频道。