vue2.js添加水印

通过canvas生成水印图片

function addWaterMark(str) {let ctx = document.createElement("canvas");ctx.width = 900;ctx.height = 450;ctx.style.display = "none";let cans = ctx.getContext("2d");cans.rotate((-20 * Math.PI) / 180);cans.font = "18px SimHei";cans.fillStyle = "rgba(46, 52, 64, 0.15)";cans.textAlign = "center";cans.textBaseline = "bottom";cans.fillText(str, 350, 350);cans.save();return ctx.toDataURL();
}

main.vue 添加水印

new Promise((resolve) => {const beforeEle = document.getElementById('watermark__wrapper');const parentEle = document.body;// 移除原先的if(beforeEle) parentEle.removeChild(beforeEle);const url = addWaterMark(“水印”);const ele = document.createElement("div");ele.id = 'watermark__wrapper';ele.style = `position: fixed; inset: 0; z-index: 2001; pointer-events: none; user-select: none; background-image: url(${url}); display: ${this.authority === 2 && res.data.watermark === 1 ? 'block' : 'none'};`;parentEle.appendChild(ele);resolve();
})

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

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

相关文章

TMUX设置鼠标滚轮滑动来浏览之前的前面内容--复制文字

在Ubuntu上使用Tmux有时使用鼠标滚轮时,和平时使用终端的习惯不怎么一致,因此可以设置启用鼠标滚轮。 通过鼠标滚轮滑动来浏览之前的前面内容 具体方式: 1 按完前缀ctrlB后 2 再按冒号:(记得shift) 3 进入命令行模式(下方绿色栏变…

Bootstrap v5版本的HTML模板

一个基本的Bootstrap v5版本的HTML模板。这是一个非常基础的模板&#xff0c;包含了Bootstrap CSS和JS的引用&#xff0c;以及一个基本的HTML结构。 <!DOCTYPE html> <html lang"zh-CN"> <head> <meta charset"UTF-8"> <…

uniapp地图基本使用及解决添加markers不生效问题?

uniapp地图使用 App端 通过 nvue 页面实现地图 文章目录 uniapp地图使用效果图templatejs添加 marker使用地图查看位置移到到当前位置 效果图 template <template><view class"mapWrap"><!-- #ifdef APP-NVUE --><map class"map-containe…

springboot自定义更换启动banner动画

springboot自定义更换启动banner动画 文章目录 springboot自定义更换启动banner动画 &#x1f4d5;1.新建banner&#x1f5a5;️2.启动项目&#x1f516;3.自动生成工具&#x1f9e3;4.彩蛋 &#x1f58a;️最后总结 &#x1f4d5;1.新建banner 在resources中新建banner.txt文…

my.ini添加了一句后又删除了,重启却失败的解决办法

背景&#xff1a;添加了一句&#xff0c;然后保存了&#xff0c;之后打开删掉了&#xff0c;结果就无法启动了&#xff0c;最后另存为ANSI格式&#xff0c;再把这个格式文件覆盖my.ini即可解决

商品软文怎么写?媒介盒子教你三步

想要把产品卖出去&#xff0c;除了保证产品质量外&#xff0c;还可以通过线上推广来提高产品销量&#xff0c;而商品文案就是线上推广中的重要因素&#xff0c;今天媒介盒子就来和大家聊聊&#xff0c;怎么写好商品软文。 商品软文想要写好主要分为三要素&#xff1a;痛点、卖…

pytdx 分笔 数据

pytdx 分笔 数据 https://rainx.gitbooks.io/pytdx/content/pytdx_hq.html 「 通达信 」的基本使用及常用设置 https://zhuanlan.zhihu.com/p/558652417 通达信功能介绍&#xff1a;还没用过“超级盘口”&#xff1f;你损失大了&#xff01; https://baijiahao.baidu.com/s?i…

C++相关闲碎记录(1)

1、C绘制爱心图像 #include <iostream> #include <cmath>using namespace std;int main() {// 心形曲线公式 (x^2 y^2 - a)^3 - x^2*y^3 0double a 1;double bound 1.5 * sqrt(a);double step 0.05;for (double y bound; y > -bound; y - step) {for (do…

方案开发:车载吸尘器PCBA方案

车载吸尘器PCBA方案&#xff0c;是为满足汽车内部清洁需求而设计的一种便携式吸尘器方案。随着人们对汽车内部环境卫生的要求日益提高&#xff0c;传统的手动清洁方式已经无法满足需求。因此&#xff0c;研发出一种便携式吸尘器方案&#xff0c;成为了刚性需求。 汽车便携吸尘…

GAN:GAN论文学习

论文&#xff1a;https://arxiv.org/pdf/1406.2661.pdf 发表&#xff1a;2014 一、GAN简介&#xff1a;Generative Adversarial Network GAN是由Ian Goodfellow于2014年提出&#xff0c;GAN&#xff1a;全名叫做生成对抗网络。GAN的目的就是无中生有&#xff0c;以假乱真。 …

3. 迷宫问题

一.题干 迷宫有一个入口&#xff0c;一个出口。一个人从入口走进迷宫&#xff0c;目标是找到出口。阴影部分和迷宫的外框为墙&#xff0c;每一步走一格&#xff0c;每格有四个可走的方向&#xff0c;探索顺序为地图方向&#xff1a;南&#xff08;下&#xff09;、东&#xff0…

【Qt】之QSet使用

描述 QSet类是一个模板类&#xff0c;它提供基于散列表的集合。 QSet是Qt的通用容器类之一。它以未指定的顺序存储值&#xff0c;并提供非常快速的值查找。在内部,QSet是作为QHash实现的。 下面是一个带有QString值的QSet示例: QSet<QString> set;插入方式1&#xff…

Java学习路线第二篇:Java Web

这篇则分享Java学习路线第二part&#xff1a;Java Web 恭喜你已经成功追到第二章节啦&#xff0c;要被自己的努力感动到了吧&#xff0c;而这节将承担起学完Java web 的使命&#xff0c;本使命为单向契约&#xff0c;你可选择YES或者选择YES。 HTMLCSSJavaScript(JS) 【动…

MySQL 高可用架构

MySQL 是实际生产中最常用的数据库&#xff0c;生产环境数据量极为庞大&#xff0c;对性能和安全要求很高&#xff0c;单机的 MySQL 是远远达不到的&#xff0c;所以必须搭建一个主从复制架构&#xff0c;同时可以基于一些工具实现高可用架构&#xff0c;在此基础上&#xff0c…

富富集网络图绘制教程

本期教程 前言 今天学习aPEAR包&#xff0c;绘制KEGG和GO功能富集网络图&#xff0c;用起来还是比较方便的&#xff0c;直接将clusterProfiler富集结果进行绘制&#xff0c;对人类、动物等分析结果非常方便。对于模式植物&#xff0c;使用自己制作的GO或KEGG背景文件进行富集分…

Modbus平台:协议中间件(支持Modbus TCP、RTU、ASCII)

该程序可放置外网中&#xff0c;适用于DTU长连接&#xff08;心跳包必须包含DTU&#xff0c;可以是tcp/udp&#xff09;&#xff0c;也可以在内网中&#xff0c;短连接访问设备server 支持协议&#xff1a;Modbus TCP | RTU | ASCII 连接方式&#xff1a;TcpAtive: TCP主动 | …

C++11实现线程池

一个完备的线程池例子 #include <iostream> #include <thread> #include <vector> #include <queue> #include <mutex> #include <condition_variable> #include <functional> #include <future>class ThreadPool { public:e…

10.一维字符数组——输出hello

文章目录 前言一、题目描述 二、解题 程序运行代码 前言 本系列为一维字符数组编程题&#xff0c;点滴成长&#xff0c;一起逆袭。 一、题目描述 输出hello 二、解题 程序运行代码 #include<stdio.h> int main() {char c[5]{h,e,l,l,o};//char c[]"hello"…

嵌入式常见协议---IIC协议

1.IIC&#xff08;IC&#xff09;协议是什么&#xff1f; 全称 Inter-Integrated Circuit ,字面意思是集成电路之间&#xff0c;是IC BUS简称&#xff0c;中文应该叫集成电路总线&#xff0c;是一种串行通信总线&#xff08;同步串行半双工&#xff09;&#xff0c;使用多主从…

给csgo游戏搬砖新手的十大建议

1、不要参与赌博性质的开箱和炼金&#xff0c;因为真的会上瘾&#xff0c;赚了还好&#xff0c;亏了你得哭。 2、实在想要玩饰品&#xff0c;直接去悠悠有品或者网易buff看价格&#xff0c;底价再砍10元&#xff0c;总会有人愿意卖的。 3、在steam上不要接受陌生人的好友申请…