vue中添加文字或圖片水印

首先引用warterMark.js，內容如下

'use strict'
 
var watermark = (className,str,type) => {
    let dom = document.getElementsByClassName(className)
    let canvas = document.createElement('canvas')
    let cxt = canvas.getContext('2d')
    let div = document.createElement('div')
    
    let imgScale = 0.6
    canvas.width = 200
    if(type == 'text'){
      cxt.font = '16px Microsoft JhengHei'
      cxt.fillStyle = 'rgba(200, 200, 200, 0.3)'
      cxt.textAlign = 'left'
      cxt.textBaseline = 'Middle'
      cxt.fillText(str, 10, 50)
      cxt.clearRect(0, 0, canvas.width, canvas.height);
       div.style.background = 'url(' + canvas.toDataURL('image/png') + ') left top repeat'
       drawImage(div,dom)  
    }else{
        //創建新的圖片對象
        let img = new Image();
        //指定圖片的URL
        img.src = str;
        //瀏覽器加載圖片完畢后再繪制圖片
        img.onload = function() {
            //cxt.drawImage(img,0,0);
            cxt.rotate(-20 * Math.PI / 180)
            let whScale = img.width / img.height
            cxt.clearRect(0, 0, canvas.width, canvas.height);
             cxt.drawImage(img, //規定要使用的圖像、畫布或視頻。
                            0, 0, //開始剪切的 x 坐標位置。
                            img.width, img.height,  //被剪切圖像的高度。
                            0, 50,//在畫布上放置圖像的 x 、y坐標位置。
                            img.width * imgScale, img.height * imgScale  //要使用的圖像的寬度、高度
                            )
            div.style.opacity = 0.3
            div.style.background = 'url(' + canvas.toDataURL('image/png') + ') left top repeat'
            drawImage(div,dom) 
        }
    }
}
var drawImage = function (div,dom) {
    div.style.pointerEvents = 'none'
      div.className = 'weterbox'
      div.style.top = 0
      div.style.left = 0
      div.style.position = 'absolute'
      div.style.zIndex = '100000'
      div.style.width = '100%'
      div.style.height = '100%'
    //console.log(dom) 
    if( dom.length > 0){
        for(let i = 0; i< dom.length;i++){
            let child = dom[i].getElementsByClassName('weterbox')
            if(child.length > 0){
                dom[i].removeChild(child[0])
            }
            dom[i].appendChild(div.cloneNode(true))
        //    console.log(i,dom[i])
        }
    }
}
 
export default watermark

在頁面中調用，首先 import watermark from '@/libs/warterMark.js'

圖片水印調用方法如下

watermark('需要添加水印的div元素的className','水印圖片路徑')
 

 

文字水印調用方法

watermark('需要添加水印的div元素的className','水印文字'，'text')

 

 

需要用到的樣式 

.viewWeb{
		position: relative;
	}