vue實現(xiàn)頁面添加水印
更新時間：2022年07月06日 08:15:03 作者：LBJsagiri
這篇文章主要為大家詳細介紹了vue實現(xiàn)頁面添加水印功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue實現(xiàn)頁面添加水印的具體代碼，供大家參考，具體內(nèi)容如下
js文件
建一個watermark.js文件
let setWatermark = (str1, str2, str3) => {
let id = '1.23452384164.123412415'
? ? if (document.getElementById(id) !== null) {
? ? ? ? document.body.removeChild(document.getElementById(id))
? ? }
? ? let can = document.createElement('canvas')
? ? can.width = 270
? ? can.height = 100
? ? let cans = can.getContext('2d')
? ? cans.rotate(-20 * Math.PI / 180)
? ? cans.font = '17px Vedana'
? ? cans.fillStyle = '#666666'
? ? cans.textAlign = 'center'
? ? cans.textBaseline = 'Middle'
? ? cans.fillText(str1, can.width / 2, can.height)
? ? cans.fillText(str2, can.width / 2, can.height + 20)
? ? cans.fillText(str3, can.width / 2, can.height + 40)
? ? let div = document.createElement('div')
? ? div.id = id
? ? div.style.pointerEvents = 'none'
? ? div.style.top = '20px'
? ? div.style.left = '0px'
? ? div.style.opacity = '0.15'
? ? div.style.position = 'fixed'
? ? div.style.width = document.documentElement.clientWidth + 'px'
? ? div.style.height = document.documentElement.clientHeight + 'px'
? ? div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat'
? ? document.body.appendChild(div)
? ? return id
}
// 添加水印
export const setWaterMark = (str1, str2, str3) => {
? ? let id = setWatermark(str1, str2, str3)
? ? if (document.getElementById(id) === null) {
? ? ? ? id = setWatermark(str1, str2, str3)
? ? }
}
// 移除水印
export const removeWatermark = () => {
? ? let id = '1.23452384164.123412415'
? ? if (document.getElementById(id) !== null) {
? ? ? ? document.body.removeChild(document.getElementById(id))
? ? }
}頁面引入
html添加
:style="{ backgroundImage: `url(${orgBackground})` }"引入
import { removeWatermark, setWaterMark } from '@/libs/watermark'data添加
orgBackground: '',
mounted()添加
setWaterMark(str1, str2, str3);
效果
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
Vue3+TS+Vant3+Pinia(H5端)配置教程詳解
這篇文章主要介紹了Vue3+TS+Vant3+Pinia(H5端)配置教程詳解,需要的朋友可以參考下2023-01-01
這篇文章主要為大家詳細介紹了vue使用laydate時間插件的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
去年，vue3出來了。增加了很多新功能，但是也刪掉了一些功能。比如刪掉了vue2中的過濾器filter功能。與此同時，官方建議：用方法調(diào)用或計算屬性替換過濾器。本文將分析vue3刪除過濾器的原因及如何用其他方法實現(xiàn)過濾器的功能2021-05-05
這篇文章主要介紹了Vue實現(xiàn)todolist刪除功能,，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-06-06
FileSaver.js?是在客戶端保存文件的解決方案，非常適合?在客戶端上生成文件的?Web?應用，它是?HTML5?版本的?saveAs()?FileSaver?實現(xiàn)，這篇文章主要介紹了vue用FileSaverJs導出文件,需要的朋友可以參考下2023-09-09
vite+vue3項目啟動報錯Unexpected?“%“問題及解決
這篇文章主要介紹了vite+vue3項目啟動報錯Unexpected?“%“問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue?頁面卡死,點擊無反應的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
淺談Vue2.4.0 $attrs與inheritAttrs的具體使用
這篇文章主要介紹了淺談Vue2.4.0 $attrs與inheritAttrs的具體使用,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-03-03
<keep-alive> 是一個抽象組件,用于將其內(nèi)部的組件保留在內(nèi)存中,而不會重新渲染,這意味著當組件在<keep-alive> 內(nèi)部切換時,其狀態(tài)將被保留,而不是被銷毀和重新創(chuàng)建,這篇文章主要介紹了Vue中的keep-alive緩存組件的理解,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了vue 在服務器端直接修改請求的接口地址的方法，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12