vue仿企微文档给页面加水印(水印内容可自定义,超简单)

1.在src下得到utils里新建一个文件watermark.js

/**  水印添加方法  */let setWatermark = (str1, str2) => {let id = '1.23452384164.123412415'if (document.getElementById(id) !== null) {document.body.removeChild(document.getElementById(id))}let can = document.createElement('canvas')// 设置canvas画布大小can.width = 300can.height = 300let cans = can.getContext('2d')cans.rotate(-20 * Math.PI / 180) // 水印旋转角度cans.font = '18px Vedana'cans.fillStyle = '#666666'cans.textAlign = 'left'cans.textBaseline = 'top'cans.fillText(str1, 0, 40) // 水印在画布的位置x,y轴cans.fillText(str2, 90, 230)let div = document.createElement('div')div.id = iddiv.style.pointerEvents = 'none'div.style.top = '0px'div.style.left = '0px'div.style.opacity = '0.1'div.style.position = 'fixed'div.style.zIndex = '100000'div.style.width = document.documentElement.clientWidth + 'px'div.style.height = document.documentElement.clientHeight + 'px'div.style.background = 'url(' + can.toDataURL('image/png') + ') left repeat'document.body.appendChild(div)return id
}// 添加水印方法
export const setWaterMark = (str1, str2) => {let id = setWatermark(str1, str2)if (document.getElementById(id) === null) {id = setWatermark(str1, str2)}
}// 移除水印方法
export const removeWatermark = () => {let id = '1.23452384164.123412415'if (document.getElementById(id) !== null) {document.body.removeChild(document.getElementById(id))}
}

2.在vue页面里直接引入使用

import { removeWatermark, setWaterMark } from '@/utils/watermark'
mounted () {// 添加水印setWaterMark('宋江','及时雨')
},
beforeDestroy () {removeWatermark()
}

3.最后效果
在这里插入图片描述

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

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

相关文章

数据结构类型

1.在C和C中static关键字的用法 在C中 1.static修饰未初始化全局变量,默认结果为0 2.static修饰局部变量,延长生命周期,生命周期不是作用域,它依旧是局部变量 3.static修饰函数只能在当前文件中调用,不可用跨文件调用…

安装对应版本pytorch和torchvision

遇见报错: ERROR: Could not find a version that satisfies the requirement torch (from versions: none) ERROR: No matching distribution found for torch 解决方法: 1、网站找到对应torch和torchvision版本,cp对应python版本&#xff…

MATLAB中pdist和pdist2的区别

一、pdist 和 pdist2 是MATLAB中用于计算距离矩阵的两个不同函数,它们的区别在于输入和输出以及一些计算选项。 pdist: pdist函数用于计算一组点之间的距离。 输入:通常接受一个矩阵,矩阵的每一行代表一个数据点,矩阵的列代表数据…

如何使用PyTorch训练LLM

推荐:使用 NSDT场景编辑器 快速搭建3D应用场景 像LangChain这样的库促进了上述端到端AI应用程序的实现。我们的教程介绍 LangChain for Data Engineering & Data Applications 概述了您可以使用 Langchain 做什么,包括 LangChain 解决的问题&#xf…

Visual Stadio使用技巧

C语言调试技巧 Debug 和 Release 的介绍 Debug:通常称为调试版本,它包含调试信息,并且不作任何优化,便于程序员调试(可调试)。 Release:通常称为发布版本,它往往时进行了各种优化&a…

Spring整合RabbitMQ-配制文件方式-2-推模式消费者

推模式的消费者 在推模式中使用可以两种实现: 使用ChannelAwareMessageListener. 除消息外,还提供了Channel这个对象,通过channel可以有更大的灵活性。 import com.rabbitmq.client.Channel; import org.springframework.amqp.core.Messa…

SpringMVC_执行流程

四、SpringMVC执行流程 1.SpringMVC 常用组件 DispatcherServlet:前端控制器,用于对请求和响应进行统一处理HandlerMapping:处理器映射器,根据 url/method可以去找到具体的 Handler(Controller)Handler:具体处理器(程…

【Springcloud】Actuator服务监控

【Springcloud】Actuator服务监控 【一】基本介绍【二】如何使用【三】端点分类【四】整合Admin-Ui【五】客户端配置【六】集成Nacos【七】登录认证【八】实时日志【九】动态日志【十】自定义通知 【一】基本介绍 (1)什么是服务监控 监视当前系统应用状…

【NLP的python库(02/4) 】:Spacy

一、说明 借助 Spacy,一个复杂的 NLP 库,可以使用用于各种 NLP 任务的不同训练模型。从标记化到词性标记再到实体识别,Spacy 还生成了精心设计的 Python 数据结构和强大的可视化效果。最重要的是,可以加载和微调不同的语言模型以适…

代码质量保障第2讲:单元测试 - 浅谈单元测试

代码质量保障第2讲:单元测试 - 浅谈单元测试 本文是代码质量保障第2讲,浅谈单元测试。单元测试(unit testing),是指对软件中的最小可测试单元进行检查和验证。这是基础,所以围绕着单元测试,我从…

HTTP代理协议原理分析

HTTP代理协议是一种常见的网络协议,它可以在网络中传递HTTP协议的请求和响应。本文将介绍HTTP代理协议的分析和原理,包括HTTP代理的工作流程、HTTP代理的请求和响应格式、HTTP代理的优缺点等方面。 一、HTTP代理的工作流程 HTTP代理的工作流程如下&#…

通过idea实现springboot集成mybatys

概述 使用springboot 集成 mybatys后,通过http请求接口,使得通过http请求可以直接直接操作数据库; 完成后端功能框架;前端是准备上小程序,调用https的请求接口用。简单实现后端框架; 详细 springboot 集…

【React 】useLayoutEffect 和 useEffect的区别

useLayoutEffect和useEffect是React中常用的两个Hook,它们的主要区别在于触发时机。 useEffect会在渲染完成后异步执行,不会阻塞浏览器的绘制操作。它适用于需要在组件渲染后执行副作用的情况,例如数据的获取、订阅事件等。它不会阻止屏幕更新…

redis zset score 求和

redis zset score 求和 local sum0 local zredis.call(‘ZRANGE’, KEYS[1], 0, -1, ‘WITHSCORES’) for i2, #z, 2 do sumsumz[i] end return sum 例子:lua ~$ redis-cli zadd z 1 a 2 b 3 c 4 d 5 e (integer) 5 ~$ redis-cli eval "local sum0 local zr…

Elasticsearch,Logstash和Kibana安装部署(ELK Stack)

前言 当今数字化时代,信息的快速增长使得各类组织和企业面临着海量数据的处理和分析挑战。在这样的背景下,ELK Stack(Elasticsearch、Logstash 和 Kibana)作为一套强大的开源工具组合,成为了解决数据管理、搜索和可视…

arduino - 用 arduino zero 开发板来学习理解arduino软件编程细节

文章目录 arduino - 用 arduino zero 开发板来学习理解arduino软件编程细节概述笔记实验环境不是所有的arduino工程都能在同一块开发板上编译过为啥arduino编程都是在setup()和loop()函数中实现代码?END arduino - 用 arduino zero 开发板来学习理解arduino软件编程细节 概述…

linux并发服务器 —— 多线程并发(六)

线程概述 同一个程序中的所有线程均会独立执行相同程序,且共享同一份全局内存区域; 进程是CPU分配资源的最小单位,线程是操作系统调度执行的最小单位; Linux环境下,线程的本质就是进程; ps -Lf pid&…

简单了解ARP协议

目录 一、什么是ARP协议? 二、为什么需要ARP协议? 三、ARP报文格式 四、广播域是什么? 五、ARP缓存表是什么? 六、ARP的类型 6.1 ARP代理 6.2 免费ARP 七、不同网络设备收到ARP广播报文的处理规则 八、ARP工作机制原理 …

好玩的js特效

记录一些好玩的js特效 1、鱼跳跃特效 引入jquery:https://code.jquery.com/jquery-3.7.1.min.js 源码如下&#xff1a; <!--引入jquery--> <script src"https://code.jquery.com/jquery-3.7.1.min.js"></script> <!--引入跳跃源码--> <s…

【JavaEE】_HTML

目录 1.HTML结构 2. HTML常用标签 2.1 注释标签 2.2 标题标签&#xff1a;h1~h6 2.3 段落标签&#xff1a;p 2.4 换行标签&#xff1a;br 2.5 格式化标签 2.6 图片标签&#xff1a;img 2.7 超链接标签&#xff1a;a 2.8 表格标签 2.9 列表标签 2.10 表单标签 2.10…