当前位置: 首页 > news >正文

【VUE】7、VUE项目中集成watermark实现页面添加水印

在网站浏览中,常常需要网页水印,以便防止用户截图或录屏暴露敏感信息后,方便追踪用户来源。

1、安装 watermark

在 package.json 文件 dependencies 节点增加 watermark-dom 依赖

"watermark-dom": "2.3.0"

然后执行命令

npm install

npm install --registry=https://registry.npm.taobao.org

安装就可以了

2、引入 watermark

在 App.vue 文件中引入 watermark

import watermark from "watermark-dom";

然后创建水印

mounted() {watermark.load({watermark_txt: "hello world"});
},

我设置的水印的内容为 【hello world】

3、效果展示

在这里插入图片描述
这样我们所有的页面都添加上了水印了

4、完整配置参数

let options = {// 水印内容watermark_txt: "text",// 水印起始位置x轴坐标watermark_x: 20,// 水印起始位置Y轴坐标watermark_y: 20,// 水印行数watermark_rows: 5,// 水印列数watermark_cols: 10,// 水印x轴间隔watermark_x_space: 100,// 水印y轴间隔watermark_y_space: 100,// 水印字体颜色watermark_color: '#aaa',// 水印透明度watermark_alpha: 0.4,// 水印字体大小watermark_fontsize: '15px',// 水印字体watermark_font: '微软雅黑',// 水印宽度watermark_width: 210,// 水印长度watermark_height: 80,// 水印倾斜度数watermark_angle: 15}

如您在阅读中发现不足,欢迎留言!!!

相关文章:

【VUE】7、VUE项目中集成watermark实现页面添加水印

在网站浏览中,常常需要网页水印,以便防止用户截图或录屏暴露敏感信息后,方便追踪用户来源。 1、安装 watermark 在 package.json 文件 dependencies 节点增加 watermark-dom 依赖 "watermark-dom": "2.3.0"然后执行命…...

Rider无法识别Todo Comment

最近因为vs code很难识别到代码中的usage和definition,改用Rider了。 但是一开始就哪里有点不对, 比如我主题的颜色总是有些地方无法识别出来。比如我每次从Unity中点击脚本文件,都只能识别到某一个特定的文件夹,而不能打开整个…...

用 docker 创建 jmeter 容器,能做性能测试?

我们都知道,jmeter 可以做接口测试,也可以用于性能测试,现在企业中性能测试也大多使用 jmeter。docker 是最近这些年流行起来的容器部署工具,可以创建一个容器,然后把项目放到容器中,就可以构建出一个独立的…...

Token 失效退出至登录页面

目录 前端设置: 1. 在登录页面,调用登录的接口后,直接获取当前时间并保存在本地,类似保存token。 2. 在路由守卫 获取本机存储的时间戳,加15分钟与当前时间进行对比,如果大于当前时间说明token失效&…...

微服务系列(2)--注册中心

在博文:微服务系列(1)里我们提到过注册中心的概念,简单来说微服务注册中心是一个用于存储和管理微服务实例信息的组件,它提供了服务注册、服务发现、服务健康检查等功能,以确保微服务之间的稳定通信。在微服务架构中,各…...

VSCode使用CMake断点调试

在 VS Code 中使用 CMake 进行断点运行调试,需要进行以下步骤: 确保已在系统中安装了 CMake 和调试器(如 GDB)。 在项目根目录下创建一个名为 .vscode 的文件夹。 在项目根目录下创建一个名为 build 的文件夹,并在终…...

Python爬虫异常处理心得:应对网络故障和资源消耗

作为一名专业的爬虫代理,我知道在爬取数据的过程中,遇到网络故障和资源消耗问题是再正常不过了。今天,我将与大家分享一些关于如何处理这些异常情况的心得和技巧。不论你是在处理网络不稳定还是资源消耗过大的问题,这些技巧能够帮…...

【CSS】CSS 布局——常规流布局

<h1>基础文档流</h1><p>我是一个基本的块级元素。我的相邻块级元素在我的下方另起一行。</p><p>默认情况下&#xff0c;我们会占据父元素 100%的宽度&#xff0c;并且我们的高度与我们的子元素内容一样高。我们的总宽度和高度是我们的内容 内边距…...

flutter开发实战-实现左右来回移动的按钮引导动画效果

flutter开发实战-实现左右来回移动的按钮引导动画效果 最近开发过程中需要实现左右来回移动的按钮引导动画效果 一、动画 AnimationController用来控制一个或者多个动画的正向、反向、停止等相关动画操作。在默认情况下AnimationController是按照线性进行动画播放的。Animati…...

ROS实现自定义信息以及使用

常见的消息包 消息包定义一般如下&#x1f447; &#xff08;1&#xff09;创建包和依赖项 &#xff08;2&#xff09;在新建的qq_msgs的包新建msgs的文件夹&#xff0c;在该文件夹里面新建Carry.msg类型的文件。 其实&#xff0c;Carry.msg就是你自己定义的消息类型&am…...

初始C语言——详细讲解操作符以及操作符的易错点

系列文章目录 第一章 “C“浒传——初识C语言&#xff08;更适合初学者体质哦&#xff01;&#xff09; 第二章 详细认识分支语句和循环语句以及他们的易错点 第三章 初阶C语言——特别详细地介绍函数 第四章 初始C语言——详细地讲解数组的内容以及易错点 第五章 初始C语言—…...

论文写作常用词句积累

X 连接词 表目的To this end/Toward that endto do soto this aimso as toTo tackle these issuesfor the sake ofaiming to do表转折howeverNevertheless表递进moreverFurthermore表对比on the other hand/On the contraryAlternativelyas in the case ofwhereas表顺序in a f…...

伺服系统::编码器

一、主要分类 二、组成与原理 光电编码器 磁编码器&#xff1a;N-->磁感元件&#xff08;0&#xff09;&#xff1b;S-->磁感元件&#xff08;1&#xff09;》脉冲 增量编码器的分辨率、倍频与细分技术 (99 封私信 / 81 条消息) 编码器有什么分类&#xff1f; - 知乎 (z…...

计算机网络 数据链路层 虚拟局域网 VLAN

...

Git全栈体系(五)

第八章 IDEA 集成 GitHub 一、设置 GitHub 账号 如果出现 401 等情况连接不上的&#xff0c;是因为网络原因&#xff0c;可以使用以下方式连接&#xff1a; 然后去 GitHub 账户上设置 token。 点击生成 token。 复制红框中的字符串到 idea 中。 点击登录。 二、分享工程…...

spring-boot webservice的例子

webservice发布服务 源码下载地址 spring-boot-webservice例子资源-CSDN文库 webservice cilent调用 源码下载地址 spring-boot-clintwebservice调用服务的例子资源-CSDN文库...

第八章 SpringBoot @ConfigurationProperties配置绑定

原始做法&#xff1a;读取到文件内容&#xff0c;再进行bean的绑定 public static void readProperties(String propertiesPath) throws IOException {Properties pps new Properties();pps.load(MainApplication.class.getClassLoader().getResourceAsStream("applicat…...

【SpringBoot】88、SpringBoot中使用Undertow替代Tomcat容器

SpringBoot 中我们既可以使用 Tomcat 作为 Http 服务,也可以用 Undertow 来代替。Undertow 在高并发业务场景中,性能优于 Tomcat。所以,如果我们的系统是高并发请求,不妨使用一下 Undertow,你会发现你的系统性能会得到很大的提升。 1、Tomcat 介绍 Tomcat是一个开源的Ja…...

java8 求和

1.BigDecimal求和 对象字段求和 List<Car> listnew ArrayList<>(); BigDecimal sumOfBigDecimals list.stream().filter(Objects::nonNull).filter(c -> c.getMiles() ! null).map(Car::getMiles).reduce(BigDecimal.ZERO, BigDecimal::add);BigDecimal集合求…...

手眼标定眼在手上

1、为什么要用手眼标定 参考手眼标定特别是眼在手上在网上的文章很多&#xff0c;但很多在实际中调试不通。在定位时候&#xff0c;往往希望相机能返回的是机械的世界坐标&#xff0c;而不是相机的的图像坐标。从而间接计算出相机坐标系与机械坐标世界坐标转换矩阵&#xff0c…...

深入浅出:JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

CMake基础:构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用&#xff0c;通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试&#xff0c;通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

【VLNs篇】07:NavRL—在动态环境中学习安全飞行

项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战&#xff0c;克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...

【分享】推荐一些办公小工具

1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由&#xff1a;大部分的转换软件需要收费&#xff0c;要么功能不齐全&#xff0c;而开会员又用不了几次浪费钱&#xff0c;借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...

Netty从入门到进阶(二)

二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架&#xff0c;用于…...

现有的 Redis 分布式锁库(如 Redisson)提供了哪些便利?

现有的 Redis 分布式锁库&#xff08;如 Redisson&#xff09;相比于开发者自己基于 Redis 命令&#xff08;如 SETNX, EXPIRE, DEL&#xff09;手动实现分布式锁&#xff0c;提供了巨大的便利性和健壮性。主要体现在以下几个方面&#xff1a; 原子性保证 (Atomicity)&#xff…...

Go语言多线程问题

打印零与奇偶数&#xff08;leetcode 1116&#xff09; 方法1&#xff1a;使用互斥锁和条件变量 package mainimport ("fmt""sync" )type ZeroEvenOdd struct {n intzeroMutex sync.MutexevenMutex sync.MutexoddMutex sync.Mutexcurrent int…...

零知开源——STM32F103RBT6驱动 ICM20948 九轴传感器及 vofa + 上位机可视化教程

STM32F1 本教程使用零知标准板&#xff08;STM32F103RBT6&#xff09;通过I2C驱动ICM20948九轴传感器&#xff0c;实现姿态解算&#xff0c;并通过串口将数据实时发送至VOFA上位机进行3D可视化。代码基于开源库修改优化&#xff0c;适合嵌入式及物联网开发者。在基础驱动上新增…...