vue專案實現對某個區域繪製水印
阿新 • • 發佈:2021-09-05
本文例項為大家分享了實現對某個區域繪製水印,供大家參考,具體內容如下
首先看一下效果:
其實原理很簡單,就是使用canvas畫成圖,然後設定div的背景即可,這裡參考了其他人思路又按照我自己的需求,封裝了一個外掛,可以直接在專案中使用,這裡可以對某一個單獨的區域設定水印:
'use strict' const watermark = {} /** * * @param {要設定的水印的內容} str * @param {需要設定水印的容器} container */ const setWatermark = (str,container) => { const id = '1.23452384164.123412415' if (container === undefined) { return } // 檢視頁面上有沒有,如果有則刪除 if (document.getElementById(id) !== null) { const childelement = document.getElementById(id) childelement.parentNode.removeChild(childelement) } var containerWidth = container.offsetWidth // 獲取父容器寬 var containerHeight = container.offsetHeight // 獲取父容器高 container.style.position = 'relative' // 設定佈局為相對佈局 // 建立canvas元素(先製作一塊背景圖) const can = document.createElement('canvas') can.width = 390 // 設定每一塊的寬度 can.height = 200 // 高度 const cans = can.getContext('2d') // 獲取canvas畫布 cans.rotate(-20 * Math.PI / 180) // 逆時針旋轉/9 cans.font = '20px Vedana' // 設定字型 cans.fillStyle= 'rgba(200,200,0.20)' // 設定字型的顏色 cans.textAlign = 'left' // 文字對齊方式 cans.textBaseline = 'Middle' // 文字基線 cans.fillText(str,4 * can.height / 5) // 繪製文字 // 建立一個div元素 const div = document.createElement('div') div.id = id // 設定id div.style.pointerEvents = 'none' // 取消所有事件 div.style.top = '0px' div.style.left = '0px' div.style.position = 'absolute' div.style.zIndex = '100000' div.style.width = containerWidth + 'px' div.style.height = containerHeight + 'px' div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat' container.appendChild(div) // 追加到頁面 return id } // 該方法只允許呼叫一次 watermark.set = (str,container) => { let id = setWatermark(str,container) setInterval(() => { if (document.getElementById(id) === null) { id = setWatermark(str,container) } },500) // 監聽頁面大小的變化 window.onresize = () => { setWatermark(str,container) } } export default watermark
在頁面中的使用方法:
引入該外掛:
import Watermark from '@/external/watermark'
然後在需要的位置上設定refs=BpJIJXHs"xxx",因客棧為在vue專案中無法直接document.getElement的方式來獲取元素,只能通過this.$refs.xxx來獲取:
<div ref="directrecordwp" class="wrapper ">
然後在mounted的鉤子函式中這樣寫:
// 設定頁面水印 Watermark.set('高校黨政雲記錄管理平臺 ' + this.name,this.$refs.directrecordwp)
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。