vue 使用class創(chuàng)建和清除水印的示例代碼
更新時間：2020年12月25日 10:14:02 作者：紫藤蘿yu
這篇文章主要介紹了vue 使用class創(chuàng)建和清除水印的示例代碼，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
頁面添加水印的方法有很多，以下舉例使用class定義的方法進行水印內容渲染：
1、新建文件：WatermarkClass.js
export default class WatermarkClass {
constructor({id="watermarkID", str = "", fontSize = 18, width = 400, height = 400, fillStyle="#333333", opacity = 1 }) {
this.id = id;
this.str = str;
this.fontSize = fontSize;
this.width = width;
this.height = height;
this.fillStyle = fillStyle
this.opacity = opacity;
}
// 繪制水印
draw() {
if (document.getElementById(this.id) !== null) {
document.body.removeChild(document.getElementById(this.id));
}
const canvas = document.createElement("canvas");
// 設置canvas畫布大小
canvas.width = this.width;
canvas.height = this.height;
const ctx = canvas.getContext("2d");
ctx.rotate(-(15 * Math.PI) / 180); // 水印旋轉角度
ctx.font = `${this.fontSize}px Vedana`;
ctx.fillStyle = this.fillStyle;
ctx.textAlign = "center";
ctx.textBaseline = "middle";
this.str.split(",").forEach((item, index) => {
ctx.fillText(item, canvas.width / 2, canvas.height / 2 + (index * this.fontSize + 10)); // 水印在畫布的位置x，y軸
});
const div = document.createElement("div");
div.id = this.id;
div.style.pointerEvents = "none";
div.style.top = "30px";
div.style.left = "10px";
div.style.opacity = this.opacity;
div.style.position = "fixed";
div.style.zIndex = "999999";
div.style.width = `${document.documentElement.clientWidth}px`;
div.style.height = `${document.documentElement.clientHeight}px`;
div.style.background = `url(${canvas.toDataURL("image/png")}) left top repeat`;
document.body.appendChild(div);
}
setOptions({fontSize = 18, width = 300, height = 300, opacity = 1, str = ""}) {
this.fontSize = fontSize;
this.width = width;
this.height = height;
this.fillStyle = fillStyle
this.opacity = opacity;
this.str = str;
this.draw();
}
// 繪制
render() {
this.draw();
window.onresize = () => {
this.draw();
};
}
// 移除水印
removeWatermark() {
if (document.getElementById(this.id) !== null) {
document.body.removeChild(document.getElementById(this.id));
}
}
}
2、在頁面種引入使用：
import watermarkClass from "@/libs/watermarkClass";
export default {
name: "App",
mounted: function () {
this.initWatermark()
},
methods: {
initWatermark() {
// 方法一
let watermark = new watermarkClass({
id: "watermarkID",
str: "紫藤蘿-watermarkClass",
fontSize: 20,
width: 300,
height: 200,
fillStyle: "#dddddd",
opacity: 0.4,
});
watermark.render();
// 5秒后，清除水印
setTimeout(() => {
watermark.removeWatermark();
}, 5000);
}
},
};
以上就是vue 使用class創(chuàng)建和清除水印的示例代碼的詳細內容，更多關于vue 創(chuàng)建和清除水印的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了vue渲染方式render和template的區(qū)別，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06
vue3實現(xiàn)tabs導航欄點擊每個導航項有下劃線動畫效果
這篇文章主要介紹了vue3實現(xiàn)tabs導航欄點擊每個導航項有下劃線動畫效果,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-07-07
vue中el-tree動態(tài)初始默認選中和全選實現(xiàn)方法
這篇文章主要給大家介紹了關于vue中el-tree動態(tài)初始默認選中和全選實現(xiàn)的相關資料,eltree默認選中eltree是一種常用的樹形控件,通常用于在網頁上呈現(xiàn)樹形結構的數(shù)據(jù),例如文件夾、目錄、組織結構等,需要的朋友可以參考下2023-09-09
最近項目中有用到json編輯器,我選用了這款vue的編輯器,看起來也是比較簡潔,接下來就具體介紹一下它,下面這篇文章主要給大家介紹了關于VUE3使用JSON編輯器的詳細圖文教程,需要的朋友可以參考下2023-04-04
vant使用datetime-picker組件設置maxDate和minDate的坑及解決
這篇文章主要介紹了vant使用datetime-picker組件設置maxDate和minDate的坑及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
前端使用print.js實現(xiàn)打印功能(基于vue)
最近新接了一個需求,想要在前端實現(xiàn)打印功能,下面這篇文章主要給大家介紹了關于前端使用print.js實現(xiàn)打印功能(基于vue)的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-05-05
Vue3使用element-plus實現(xiàn)彈窗效果
本文主要介紹了Vue3使用element-plus實現(xiàn)彈窗效果，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-07-07
這篇文章主要介紹了基于Vue全局組件與局部組件的區(qū)別說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要為大家介紹了Vue常見組件間通信方案及典型應用場景詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
Vue3使用vue-router如何實現(xiàn)路由跳轉與參數(shù)獲取
這篇文章主要介紹了Vue3使用vue-router如何實現(xiàn)路由跳轉與參數(shù)獲取，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03