這篇“怎么用JS實現(xiàn)覆蓋水印效果”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“怎么用JS實現(xiàn)覆蓋水印效果”文章吧。

創(chuàng)新互聯(lián)公司服務項目包括南雄網(wǎng)站建設(shè)、南雄網(wǎng)站制作、南雄網(wǎng)頁制作以及南雄網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，南雄網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務的客戶以成都為中心已經(jīng)輻射到南雄省份的部分城市，未來相信會繼續(xù)擴大服務區(qū)域并繼續(xù)獲得客戶的支持與信任！

一、效果

處理之前

處理之后

這里添加 “水印”（其實并不是真正的水印） 到 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
       //進行平移，計算平移的參數(shù)
       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){
       //創(chuàng)建div(canvas需要依賴一個div進行位置設(shè)置)
       let warterMarDiv = document.createElement('div')
       //關(guān)聯(lián)水印dom對象
       el.warterMark = warterMarDiv
       //添加樣式
       this.resetCanvasPosition(el)
       //添加水印
       warterMarDiv.appendChild(canvas)
       //添加到父標簽
       el.parentElement.insertBefore(warterMarDiv,el)
   }

   //重新計算位置
   resetCanvasPosition(el){
       if(el.warterMark){
           //設(shè)置父標簽的定位
           el.parentElement.style.cssText = `position: relative;`
           //設(shè)施水印載體的定位
           el.warterMark.style.cssText = 'position: absolute;top: 0px;left: 0px;pointer-events:none'
       }
   }
}

用法

   
   


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

ctx.save()與 ctx.restore()其實在這里的作用不是很大，但還是添加上了，目的是保存添加水印前的上下文，跟結(jié)束繪制后恢復水印前的上下文，這樣，這些斜體字只在這兩行代碼之間生效，下面如果再繪制其他，那么，將不受影響。

防止蒙版水印遮擋底層按鈕或其他事件，需要添加 pointer-events:none屬性到蒙版標簽上。

添加水印的標簽外需要添加一個 父標簽，這個 父標簽的作用就是添加約束 蒙版canvas的位置，這里想通過 MutationObserver觀察 body的變化來進行更新 蒙版canvas的位置，這個嘗試失敗了，因為復雜的布局只要變動會都在這個回調(diào)里觸發(fā)。因此，直接在添加水印的標簽外需要添加一個 父標簽，用這個 父標簽來自動約束 蒙版canvas的位置。

MutationObserver邏輯如下，在監(jiān)聽回調(diào)里可以及時修改布局或者其他操作（暫時放棄）。

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

mutationObserver.observe(document.getElementsByTagName('body')[0], {
   childList: true, // 子節(jié)點的變動（新增、刪除或者更改）
   attributes: true, // 屬性的變動
   characterData: true, // 節(jié)點內(nèi)容或節(jié)點文本的變動
   subtree: true // 是否將觀察器應用于該節(jié)點的所有后代節(jié)點
})

圖片的大小只有在加載完成之后才能確定，所以，對于 IMG的操作，需要觀察它的 complete事件。

以上就是關(guān)于“怎么用JS實現(xiàn)覆蓋水印效果”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。