站長資訊網(wǎng)
廢話開篇：簡單實(shí)現(xiàn)一個(gè)覆蓋水印的小功能，水印一般都是添加在圖片上，然后直接加載處理過的圖片url即可，這里并沒有修改圖片，而是直接的在待添加水印的 dom 上添加一個(gè) canvas 蒙版。
一、效果
處理之前
DIV
IMG
處理之后
DIV
IMG
這里添加 “水印”（其實(shí)并不是真正的水印） 到 DIV 的時(shí)候按鈕點(diǎn)擊事件并不會因?yàn)橛忻砂嬲趽醵鵁o法點(diǎn)擊
二、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){ //圖片，需要加載完成進(jìn)行操作 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 //進(jìn)行平移，計(jì)算平移的參數(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) //起始坐標(biāo) let x = 0 let y = 0 //一組文字之間間隔 let sepY = (font / 2.0) while(y < canvas.height){ //當(dāng)前行的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) //計(jì)算尺度 let textRect = ctx.measureText(text) let width = textRect.width let height = textRect.height return {x,y,width,height} } //添加canvas到當(dāng)前標(biāo)簽的父標(biāo)簽上 addCanvas(canvas,el){ //創(chuàng)建div(canvas需要依賴一個(gè)div進(jìn)行位置設(shè)置) let warterMarDiv = document.createElement('div') //關(guān)聯(lián)水印dom對象 el.warterMark = warterMarDiv //添加樣式 this.resetCanvasPosition(el) //添加水印 warterMarDiv.appendChild(canvas) //添加到父標(biāo)簽 el.parentElement.insertBefore(warterMarDiv,el) } //重新計(jì)算位置 resetCanvasPosition(el){ if(el.warterMark){ //設(shè)置父標(biāo)簽的定位 el.parentElement.style.cssText = `position: relative;` //設(shè)施水印載體的定位 el.warterMark.style.cssText = 'position: absolute;top: 0px;left: 0px;pointer-events:none' } } }
用法
<div> <!-- 待加水印的IMG --> <img style="width: 100px;height: auto" src="" alt=""> </div> let waterMark = new WaterMark() waterMark.startWaterMark();
ctx.save() 與 ctx.restore() 其實(shí)在這里的作用不是很大，但還是添加上了，目的是保存添加水印前的上下文，跟結(jié)束繪制后恢復(fù)水印前的上下文，這樣，這些斜體字只在這兩行代碼之間生效，下面如果再繪制其他，那么，將不受影響。
防止蒙版水印遮擋底層按鈕或其他事件，需要添加 pointer-events:none 屬性到蒙版標(biāo)簽上。
添加水印的標(biāo)簽外需要添加一個(gè) 父標(biāo)簽 ，這個(gè) 父標(biāo)簽 的作用就是添加約束 蒙版canvas 的位置，這里想通過 MutationObserver 觀察 body 的變化來進(jìn)行更新 蒙版canvas 的位置，這個(gè)嘗試失敗了，因?yàn)閺?fù)雜的布局只要變動(dòng)會都在這個(gè)回調(diào)里觸發(fā)。因此，直接在添加水印的標(biāo)簽外需要添加一個(gè) 父標(biāo)簽 ，用這個(gè) 父標(biāo)簽 來自動(dòng)約束 蒙版canvas 的位置。
MutationObserver 邏輯如下，在監(jiān)聽回調(diào)里可以及時(shí)修改布局或者其他操作（暫時(shí)放棄）。
var MutationObserver = window.MutationObserver || window.webkitMutationObserver || window.MozMutationObserver; var mutationObserver = new MutationObserver(function (mutations) { //修改水印位置 }) mutationObserver.observe(document.getElementsByTagName('body')[0], { childList: true, // 子節(jié)點(diǎn)的變動(dòng)（新增、刪除或者更改） attributes: true, // 屬性的變動(dòng) characterData: true, // 節(jié)點(diǎn)內(nèi)容或節(jié)點(diǎn)文本的變動(dòng) subtree: true // 是否將觀察器應(yīng)用于該節(jié)點(diǎn)的所有后代節(jié)點(diǎn) })
圖片的大小只有在加載完成之后才能確定，所以，對于 IMG 的操作，需要觀察它的 complete 事件。
三、總結(jié)與思考
用 canvas ctx.drawImage(img, 0, 0) 進(jìn)行繪制，再將 canvas.toDataURL('image/png') 生成的 url 加載到之前的圖片上，也是一種方式，但是，有時(shí)候會因?yàn)閳D片的原因?qū)е伦詈蟮暮铣蓤D片的 base64 數(shù)據(jù)是空，所以，直接增加一個(gè)蒙版，本身只是為了顯示，并不是要生成真正的合成圖片。實(shí)現(xiàn)了簡單的偽水印，沒有特別復(fù)雜的代碼，代碼拙劣，大神勿笑[抱拳][抱拳][抱拳]
推薦學(xué)習(xí)：《JavaScript視頻教程》
