快捷導(dǎo)航

JavaScript實(shí)現(xiàn)簡(jiǎn)易的水印覆蓋功能

更新時(shí)間：2022年12月09日 09:47:38 作者：頭疼腦脹的代碼搬運(yùn)工

本文將簡(jiǎn)單實(shí)現(xiàn)一個(gè)覆蓋水印的小功能，水印一般都是添加在圖片上，然后直接加載處理過(guò)的圖片url即可，這里并沒(méi)有修改圖片，而是直接的在待添加水印的?dom?上添加一個(gè)?canvas?蒙版，需要的可以參考一下

一、效果

處理之前

DIV

IMG

處理之后

DIV

IMG

這里添加 “水印”（其實(shí)并不是真正的水?。?到 DIV 的時(shí)候按鈕點(diǎn)擊事件并不會(huì)因?yàn)橛忻砂嬲趽醵鵁o(wú)法點(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
    }
    
    //開(kāi)始添加水印
    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對(duì)象
    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對(duì)象添加水印
    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對(duì)象
        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 的位置，這里想通過(guò) MutationObserver 觀察 body 的變化來(lái)進(jìn)行更新 蒙版canvas 的位置，這個(gè)嘗試失敗了，因?yàn)閺?fù)雜的布局只要變動(dòng)會(huì)都在這個(gè)回調(diào)里觸發(fā)。因此，直接在添加水印的標(biāo)簽外需要添加一個(gè) 父標(biāo)簽 ，用這個(gè) 父標(biāo)簽 來(lái)自動(dòng)約束 蒙版canvas 的位置。

MutationObserver 邏輯如下，在監(jiān)聽(tīng)回調(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)
})

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

三、總結(jié)與思考

用 canvas ctx.drawImage(img, 0, 0) 進(jìn)行繪制，再將 canvas.toDataURL('image/png') 生成的 url 加載到之前的圖片上，也是一種方式，但是，有時(shí)候會(huì)因?yàn)閳D片的原因?qū)е伦詈蟮暮铣蓤D片的 base64 數(shù)據(jù)是空，所以，直接增加一個(gè)蒙版，本身只是為了顯示，并不是要生成真正的合成圖片。

到此這篇關(guān)于JavaScript實(shí)現(xiàn)簡(jiǎn)易的水印覆蓋功能的文章就介紹到這了,更多相關(guān)JavaScript水印覆蓋內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: