前端实现页面通过canvas添加全屏水印

 写在前面,博主是个在北京打拼的码农,从事前端工作5年了,做过十多个大大小小不同类型的项目,最近心血来潮在这儿写点东西,欢迎大家多多指教。

  • 对于文章中出现的任何错误请大家批评指出,一定及时修改。
  • 有任何想要讨论和学习的问题可联系我:13287946835@139.com。
  • 发布文章的风格因专栏而异,均自成体系,不足之处请大家指正。

前端通过方法实现全部页面添加自定义文字的水印

本文关键字:水印、自定义、公共方法、随意添加文字

方法如下:
	addWaterMarker(str){var can = document.createElement('canvas');var body = document.getElementById("app");body.appendChild(can);can.width=200;can.height=150;can.style.display='none';var cans = can.getContext('2d');cans.rotate(-20*Math.PI/180);cans.font = "16px Microsoft JhengHei";cans.fillStyle = "rgba(17, 17, 17, 0.30)";cans.textAlign = 'left';cans.textBaseline = 'Middle';cans.fillText(str,can.width/6,can.height/2);body.style.backgroundImage="url("+can.toDataURL("image/png")+")";},
测试使用:

mounted() {

    this.addWaterMarker('张健振      测试中');

}

效果展示:

文章传送门:

vue的html2canvas使用解读,完美避免可能会造成的问题

dicom胶片展示,使用基石插件cornerstoneTools完成

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

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

相关文章

视频直播点播平台EasyDSS如何单独保存录像计划文件?具体如何操作呢?

视频推拉流EasyDSS视频直播点播平台,集视频直播、点播、转码、管理、录像、检索、时移回看等功能于一体,可提供音视频采集、视频推拉流、播放H.265编码视频、存储、分发等视频能力服务。 有用户反馈:在视频直播点播平台EasyDSS中设置了片段形…

【数据结构--二叉树】合并二叉树

/*** Definition for a binary tree node.* struct TreeNode {* int val;* struct TreeNode *left;* struct TreeNode *right;* };*/struct TreeNode* mergeTrees(struct TreeNode* root1, struct TreeNode* root2){if(root1NULL&&root2NULL)//两个二叉树都…

华为云云耀云服务器L实例评测|Linux系统之安装Tomcat

华为云云耀云服务器L实例评测|Linux系统之安装Tomcat 一、云耀云服务器L实例介绍1.1 云耀云服务器L实例简介1.2 云耀云服务器L实例特点 二、Tomcat介绍2.1 Tomcat简介2.2 Tomcat特点 三、本次实践介绍3.1 本次实践简介3.2 本次环境规划 四、购买云耀云服务器L实例4.…

risc-v dv源代码分析

地址为 GitHub - chipsalliance/riscv-dv: Random instruction generator for RISC-V processor verificationRandom instruction generator for RISC-V processor verification - GitHub - chipsalliance/riscv-dv: Random instruction generator for RISC-V processor verif…

Windows驱动开发(一)

1. 引言 很难为术语 “驱动程序”提供一个精确的定义。 就最基本的意义而言,驱动程序是一个软件组件,可让操作系统和设备彼此通信。 例如,假设应用程序需要从设备中读取某些数据。 应用程序会调用由操作系统实现的函数,操作系统…

Windows下Git Bash的基本使用

创建版本库 git init 初始化完成后,会在目录下创建一个.git的隐藏目录,用来存放项目信息。 、 添加文件到版本库 在项目目录下新建文件readme.txt,内容为 Git is a version control system Git is a free software This is my first Try …

MySQL知识笔记——初级基础(实施工程师和DBA工作笔记)

老生长谈,MySQL具有开源、支持多语言、性能好、安全性高的特点,广受业界欢迎。 在数据爆炸式增长的年代,掌握一种数据库能够更好的提升自己的业务能力(实施工程师)。 此系列将会记录我学习和进阶SQL路上的知识&#xf…

Haproxy搭建Web群集

常见的Web集群调度器分为软件和硬件 软件通常使用开源的LVS、Haproxy、Nginx。 * LVS 性能最好,但是搭建相对复杂 * Nginx的upstream模块支持群集功能,但是对群集节点健康检查功能不强,高并发性能没有Haproxy好。 硬件一般使用比较多的是F5、…

postman连接websocket 测试(v8.5.1)

1. postman v8.5版本 以上支持 websocket。 2. 选择websocket请求模块File - New... 3. 输入请求地址, ws:// 控制台输出: 2023-09-12 15:29:23.039 INFO 11592 --- [nio-8080-exec-2] o.a.c.c.C.[Tomcat].[localhost].[/] : Initializing Spring DispatcherServlet di…

sql注入之高权限注入和文件读写

死在山野的风里,活在自由的梦里 sql注入之高权限注入 高权限注入1.多个网站共享mysql服务器2.MySQL 权限介绍3.注入流程查询所有数据库名称查询表名对应的字段名查询数据 文件读写1.文件读写注入的原理2.文件读写注入的条件3.读取文件4.写入文件 高权限注入 在数据…

学习SpringMvc第三战-利用SpringMvc实现CRUD

目录 一.前期环境搭建 1.替换pom.xml的内容 2.导入配置文件(小编上传资源) 3.修改xml文件 4.点击创建自动生成代码 5.写一个类用于处理页面跳转 二.正式启动SpringMVC的CRUD 1.建立接口,调用自动生成的接口 2.构建分页代码 2.1书写BookMapper.xml中分页的方…

12个最受欢迎的3D打印机械臂【开源|DIY|套件】

推荐:用 NSDT编辑器 快速搭建可编程3D场景 机器人手臂的用途各不相同,但大多数都能够执行拾取和放置任务,而有些则配备用于 CNC 工作、激光雕刻,甚至 3D 打印。 机械臂具有广泛的应用和各个领域,从执行精密手术和进行工…

Kafka3.0.0版本——消费者(分区的分配以及再平衡)

目录 一、分区的分配以及再平衡1.1、消费者分区及消费者组的概述1.2、如何确定哪个consumer来消费哪个partition的数据1.3、消费者分区分配策略 一、分区的分配以及再平衡 1.1、消费者分区及消费者组的概述 一个consumer group中有多个consumer组成,一个 topic有多…

go语言基本操作---六

并发编程 并行:指在同一时刻,有多条指令在多个处理器上同时执行。 并发:指在同一时刻只能有一条指令执行,但是多个进程指令被快速的轮换执行,使得在宏观上具有多个进程同时执行的效果,但在微观上并不是同时…

python机器人编程——用python实现一个写字机器人

目录 一、前言二、整体框架2.1 系统构成2.2 硬件介绍2.2.1主要组成部分2.2.2机械结构2.2.3驱动及控制主板PS电机驱动原理简介: 2.2.4其余部分 2.3 机器人python程序框架2.3.1通信服务模块2.3.2消息处理模块2.3.3轨迹解析模块2.3.4机械臂逆解模块2.3.5写字板模块 三、机械臂的建…

浅谈基于LoRa通信技术的建筑能耗监测系统及模块

安科瑞 华楠 摘要:本文提出采用LoRa通信技术开发设计建筑能耗监测系统的建议,通过系统,该系统功能完善、界面友好、通信稳定,在建筑能耗监测领域中有较高的推广价值。 关键词:LoRa通信;建筑能耗&#xff…

63、SpringBoot---定制 RestTemplate--消息转化器、拦截器

★ 定制RestTemplate 如要对RestTemplate进行自定义设置,Spring Boot也提供了两种主要方式:▲ 局部式:在调用RestTemplateBuilder构建RestTemplate之前,先调用RestTemplateBuilder的方法对其定制,通过这种方式设置的R…

最新遥感数据与作物模型同化教程

详情点击公众号链接:最新遥感数据与作物模型同化教程一:遥感基础1.遥感平台(如无人机)与传感器、国内外主要陆地卫星(如Landsat、SPOT、HJ、GF) 2.遥感基本原理、光谱响应函数、遥感数据处理流程 3.遥感在陆…

华为交换机:STP的详解和试验

前言 为了解决网络冗余链路所产生的问题,IEEE定义了802.1D协议,即生成树协议STP,利用生成树协议可以避免帧在环路中的增生和无限循环,生成树的主要思想是,当两个交换机之间存在多条链路时,通过一定的算法只激活其中最主要的一条链路,而将其他冗余链路阻塞掉变为备用链路,当主链…

【mysql】—— 函数的基本介绍

前言: MySQL是一种常用的关系型数据库管理系统,它提供了许多内置的函数来进行数据操作和处理。本期,我将给大家介绍的就是关于 “函数” 的相关知识!!! 目录 (一)日期函数 &#…