主要實現邏輯是先創建一個所需水印的canvas圖片, 然後建一個div, 將canvas圖片作爲背景插入html
主要實現的方式是參考 https://www.jb51.net/article/221760.htm 感謝
1. 首先是創建一個js, 將水印的公共方法封裝一下
let watermark = {}; let setWatermark = (text, sourceBody) => { let id = 'watermark_fjq_' + parseInt(Math.random() * 100000); if (document.getElementById(id) !== null) { document.body.removeChild(document.getElementById(id)); } //水印圖片 let can = document.createElement('canvas'); can.width = 150;// 單個水印大小 can.height = 120;// 單個水印大小 let cans = can.getContext('2d'); cans.rotate(-20 * Math.PI / 180); cans.font = '15px Vedana'; cans.fillStyle = '#DCDCDC';//水印顏色 cans.textAlign = 'left'; cans.textBaseline = 'Middle'; cans.fillText(text, can.width / 20, can.height); //設置插入div樣式 let water_div = document.createElement('div'); water_div.id = id; water_div.style.pointerEvents = 'none'; water_div.style.overflow = 'hidden'; water_div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat'; if (sourceBody) { sourceBody.style.position = 'relative'; water_div.style.width = '100%'; water_div.style.height = '100%'; water_div.style.position = 'absolute'; water_div.style.top = '0'; water_div.style.left = '0'; sourceBody.appendChild(water_div); } else { water_div.style.top = '3px'; water_div.style.left = '0px'; water_div.style.position = 'fixed'; water_div.style.zIndex = '9999'; water_div.style.width = document.documentElement.clientWidth + 'px'; water_div.style.height = document.documentElement.clientHeight + 'px'; document.body.appendChild(water_div); } return id; } /** * 該方法只允許調用一次 * @param: * @text == 水印內容 * @sourceBody == 水印添加在哪裏,不傳就是body * */ watermark.set = (text, sourceBody) => { setTimeout(() => { setWatermark(text, sourceBody); }, 1000);//延遲加載 } export default watermark;
2. 在需要的需要調用
import watermark from '@/lib/watermark.js'; watermark.set('水印文本',this.$refs.mkdiv);//某個div需要水印, 需要提前給div設置ref屬性 watermark.set('水印文本');//整個頁面需要水印
3. 查看效果