Vue项目为页面添加水印效果

最近在做项目,有这样要求,需要在指定容器中添加水印,也可不设置容器,如果没有容器,则添加在整个页面中,即body,当接到这个需求的时候我第一想的方法就是用canvas来实现,话不多说搞起来。

实现方法

首先我们在utils文件中新建一个waterMark.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 = 390; // 单个水印大小can.height = 180; // 单个水印大小let cans = can.getContext('2d');cans.rotate((-20 * Math.PI) / 180);cans.font = '14px Vedana';cans.fillStyle = 'rgba(200, 200, 200, 0.20)'; //水印颜色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 = '200px';water_div.style.position = 'fixed';water_div.style.zIndex = '9999';water_div.style.width = document.documentElement.offsetWidth + 'px';water_div.style.height = document.documentElement.offsetHeight + 'px';document.body.appendChild(water_div);}return id;
};/***  该方法只允许调用一次*  @param:*  @text == 水印内容*  @sourceBody == 水印添加在哪里,不传就是body* */
watermark.set = (text, sourceBody) => {setTimeout(() => {setWatermark(text, sourceBody);}, 1000); //延迟加载
};export default watermark;

使用方法

在main.js 中引入 waterMark.js。

// 引入水印文件地址
import watermark from '@/utils/waterMark'
Vue.prototype.$watermark = watermark

 如果我们在指定页面中使用:

this.$watermark.set(text,dom)
参数说明是否必填
text水印内容
dom水印容器。若不传,则全屏水印,若传,则指定容器。

比如,在指定容器水印: 

<template><div class="page"><div ref="content"></div></div>
</template><script>
export default {data() {return {};},mounted(){this.$watermark.set("码云笔记",this.$refs.content)},beforeDestroy() {this.$watermark.set("",this.$refs.content);}
};
</script>

 我这里需要给整个项目页面添加水印,所以在App.vue文件中引入:

<template><router-view />
</template><script>
export default {name: 'App',data() {return {};},mounted() {this.$watermark.set('码云笔记');},beforeDestroy() {this.$watermark.set('');},
};
</script>

 结语

以上就是我在Vue项目为页面添加水印效果,都是实际项目中使用过的,大家可以直接CV使用,如果大家有更好的方法,欢迎留言交流。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/101942.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Unity设计模式——装饰模式

装饰模式&#xff08;Decorator&#xff09;&#xff0c;动态地给一个对象添加一些额外的职责&#xff0c;就增加功能来说&#xff0c;装饰模式比生成子类更为灵活。 Component类&#xff1a; abstract class Component : MonoBehaviour {public abstract void Operation(); …

华为认证 | HCIP-Datacom,这门认证正式发布新版本!

华为认证数通高级工程师HCIP-Datacom-Campus Network Planning and Deployment V1.5&#xff08;中文版&#xff09;自2023年9月28日起&#xff0c;正式在中国区发布。 01 发布概述 基于“平台生态”战略&#xff0c;围绕“云-管-端”协同的新ICT技术架构&#xff0c;华为公司…

互联网性能和可用性优化CDN和DNS

当涉及到互联网性能和可用性优化时&#xff0c;DNS&#xff08;Domain Name System&#xff09;和CDN&#xff08;Content Delivery Network&#xff09;是两个至关重要的元素。它们各自发挥着关键作用&#xff0c;以确保用户能够快速、可靠地访问网站和应用程序。在本文中&…

C++ 指向数组的指针

如果您对 C 指针的概念有所了解&#xff0c;那么就可以开始本章的学习。数组名是指向数组中第一个元素的常量指针。因此&#xff0c;在下面的声明中&#xff1a; double runoobAarray[50];runoobAarray 是一个指向 &runoobAarray[0] 的指针&#xff0c;即数组 runoobAarra…

Java 多线程编程

Java 多线程编程 目录 Java 多线程编程 一个线程的生命周 线程的优先级 创建一个线程 通过实现Runnable接口来创建线程 实例 通过继承Thread来创建线程 实例 Thread 方法 实例 线程的几个主要概念: 多线程的使用 Java给多线程编程提供了内置的支持。一个多线程程序包…

微信小程序项目如何用Hbuild启动,先让对方在微信开发平台将你的微信号添加成开发成员。

微信小程序项目如何用Hbuild启动&#xff0c;先让对方在微信开发平台将你的微信号添加成开发成员。然后在Hbuild官网下载&#xff0c;下载好后运行&#xff0c;点击文件导入项目&#xff0c;然后点击运行&#xff0c;模拟微信小程序&#xff0c;选择微信开发工具的地址&#xf…

【2023美团后端-8】删除字符串的方案,限制不能连续删

小美定义一个字符申是“美丽串”&#xff0c;当且仅当该字符串包含”mei”连续子串。例如”meimei”、“xiaomeichan"都是美丽串&#xff0c;现在小美拿到了一个字符串&#xff0c;她准备删除一些字符&#xff0c;但不能删除两个连续字符。小美希望最终字符串变成美丽串&a…

技巧:训练时Loss剧烈震荡原因汇总

输入数据有误 数据集太少 输入数据为经过标准化&#xff1a;没有经过正则化处理的数据可能存在异常点&#xff0c;或者数据的量纲不一致。可以采用min_max归一化或者z-score标准化 没有选择合理的数据增强没有经过合理的数据增强可能导致训练的时候网络学习的数据不是想要的最…

pyqt---子线程进行gui操作导致界面崩溃

在 PyQt&#xff08;或 Qt 通常&#xff09;中&#xff0c;您不能直接在子线程中执行与 GUI 相关的操作。这可能会导致应用程序崩溃或不可预测的行为。所有与 GUI 相关的操作都应该在主线程中执行。 如果您需要在子线程完成某些操作后显示一个消息框&#xff0c;可以使用 PyQt…

软件工程与计算总结(六)需求分析方法

本贴介绍需求分析方法&#xff0c;涉及到诸多实践性的东西&#xff0c;掌握各种图表的绘制是重中之重~ 一.需求分析基础 1.原因 需求获取中得到的信息仅仅解释了用户对软件系统的理解与期待&#xff0c;使用的是实际业务的表达方式&#xff0c;还不是开发者能够立即加以实现…

【算法|动态规划No.16】leetcode931. 下降路径最小和

个人主页&#xff1a;兜里有颗棉花糖 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 兜里有颗棉花糖 原创 收录于专栏【手撕算法系列专栏】【LeetCode】 &#x1f354;本专栏旨在提高自己算法能力的同时&#xff0c;记录一下自己的学习过程&#xff0c;希望…

VSCODE+PHP8.2配置踩坑记录

VSCODEPHP8.2配置踩坑记录 – WhiteNights Site 我配置过的最恶心的环境之一&#xff1a;windows上的php。另一个是我centos服务器上的php。 进不了断点 端口配置和xdebug的安装 这个应该是最常见的问题了。从网上下载完php并解压到本地&#xff0c;打开vscode&#xff0c;安装…

基于SpringBoot的网上摄影工作室

目录 前言 一、技术栈 二、系统功能介绍 用户信息管理 作品分类管理 轮播图管理 摄影作品管理 摄影作品收藏 摄影圈 摄影作品发布 三、核心代码 1、登录模块 2、文件上传模块 3、代码封装 前言 随着信息技术在管理上越来越深入而广泛的应用&#xff0c;管理信息系统…

MySql基础:utf8_unicode_ci、utf8_general_ci

区别 utf8_general_ci 校对速度快&#xff0c;但准确度稍差。 utf8_unicode_ci 准确度高&#xff0c;但校对速度稍慢。 德语、法语或者俄语&#xff0c;请一定使用utf8_unicode_ci。一般用utf8_general_ci就够了。 utf8_unicode_ci和utf8_general_ci对中、英文来说没有差别。 …

华为云云耀云服务器L实例评测|华为云上的CentOS性能监测与调优指南

目录 引言 ​编辑1 性能调优的基本要素 2 性能监控功能 2.1 监控数据指标 2.2 数据历史记录 2.3 多种统计指标 3 性能优化策略 3.1 资源分配 3.2 磁盘性能优化 3.3 网络性能优化 3.4 操作系统参数和内核优化 结论 引言 在云计算时代&#xff0c;性能优化和调优对于…

Nginx 网站服务

Nginx 稳定性高 &#xff08;但是没有apache稳定) 版本号&#xff1a;1.12 1.20 1.22 系统资源消耗低 (处理http请求的并发能力很高&#xff0c;单台物理服务器可以处理30000-50000个并发请求) 稳定&#xff1a;一般在企业中&#xff0c;为了保持服务器稳定&#xff0c;并发量…

记录 K8S 挂了的解决经过

背景&#xff1a;早上到公司&#xff0c;有同事反馈部署K8S在集群上的 Redis 和 禅道 都不可用 排查循序&#xff1a; 登录 kubesphere 的 web 界面 &#xff08;界面打开失败&#xff09;ssh 登录主服务器 &#xff08;正常&#xff09;在主服务器上运行 kubectl get node 命…

Qt QPair

QPair 文章目录 QPair 摘要QPairQPair 特点代码示例QPair 与 QMap 区别 关键字&#xff1a; Qt、 QPair、 QMap、 键值、 容器 摘要 今天在观摩小伙伴撸代码的时候&#xff0c;突然听到了QPair自己使用Qt开发这么就&#xff0c;竟然都不知道&#xff0c;所以趁没有被人发…

3、在 CentOS 8 系统上安装 PostgreSQL 15.4

PostgreSQL&#xff0c;作为一款备受欢迎的开源关系数据库管理系统&#xff08;RDBMS&#xff09;&#xff0c;已经存在了三十多年的历史。它提供了SQL语言支持&#xff0c;用于管理数据库和执行CRUD操作&#xff08;创建、读取、更新、删除&#xff09;。 由于其卓越的健壮性…

k8s 集群部署 kubesphere

一、最小化部署 kubesphere 1、在已有的 Kubernetes 集群上部署 KubeSphere&#xff0c;下载 YAML 文件: wget https://github.com/kubesphere/ks-installer/releases/download/v3.4.0/kubesphere-installer.yaml wget https://github.com/kubesphere/ks-installer/releases/…