import DomSize from 'wd-domsize-monitor'; // 此處為 npm 下載的第三方模塊包 import Api_login from "@/assets/api/login" // 此處是用戶信息接口調用var id = 'shuiyinDiv' var isInit = false let callback = function (ele) {DomSize.bind(ele, function () {//水印被刪除DomSize.remove(ele);waterMark(callback)})} var waterMark = function (callback) {let old = document.getElementById(id)if (old) {old.remove()}function textBecomeImg(text, fontsize, fontcolor) {var canvas = document.createElement('canvas');let $buHeight = 0;if (fontsize <= 32) { $buHeight = 99; }else if (fontsize > 32 && fontsize <= 60) { $buHeight = 2; }else if (fontsize > 60 && fontsize <= 80) { $buHeight = 4; }else if (fontsize > 80 && fontsize <= 100) { $buHeight = 6; }else if (fontsize > 100) { $buHeight = 10; }canvas.height = fontsize + $buHeight;canvas.padding = 30;var context = canvas.getContext('2d');context.clearRect(0, 0, canvas.width * 2, canvas.height);context.fillStyle = fontcolor;context.font = fontsize + "px Arial";context.textAlign = "center";context.textBaseline = 'middle';context.fillText(text, 0, fontsize / 2);var canvasWidth = canvas.width / 99;canvasWidth = context.measureText(text).width;canvas.width = 250;canvas.height = 120;context.fillStyle = fontcolor;context.font = fontsize + "px Arial";context.textBaseline = 'middle';context.fillText(text, 0, fontsize / 2);var dataUrl = canvas.toDataURL('image/png');return dataUrl;}var createEle = function () {// var loginName = userInfoData.mobile ? userInfoData.mobile.substr(userInfoData.mobile.length - 4, 4) : ""var text = userInfoData.name + "-" + userInfoData.mobilePhone;var shuiyinEle = document.createElement('div');shuiyinEle.id = idvar style = shuiyinEle.style;style.position = 'fixed';style.left = '-50%';style.top = '-50%';style.width = '200%';style.height = '200%';style.opacity = '0.1';style.background = "url(" + textBecomeImg(text, 16, "#666666") + ")";style.zIndex = 9999999991;style.transform = "rotate(-30deg)";style.pointerEvents = "none";document.body.appendChild(shuiyinEle);callback(shuiyinEle)var target = document.getElementById(id);var observer = new MutationObserver(function (mutations) {mutations.forEach(function (mutation) {observer.disconnect();reset()});});var config = { attributes: true, childList: true, characterData: true };observer.observe(target, config);}var userInfoData = localStorage.getItem('userInfo')userInfoData = JSON.parse(userInfoData)if (!userInfoData || !userInfoData.name) {Api_login.getUserInfo().then(response => {userInfoData = response.result;// localStorage.setItem('accessToken', response.result)createEle()}).catch(err => {isInit = false})} else {createEle()} } var reset = function () {waterMark(callback) } var init = function () {waterMark(callback) }export default init;

在 App.vue中使用

<template><div id="app"><keep-alive><router-view></router-view></keep-alive></div> </template><script> import waterMark from "./libs/watermark" export default {name: 'App',data() {return {}},computed: {},created() {},mounted() {waterMark()},methods: {} } </script><style> #app {background: url('./assets/bg.gif') repeat;background-color: #0a0a0a !important; } </style>

總結

以上是生活随笔為你收集整理的vue项目水印添加的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。