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

通过jr-qrcode生成二维码并下载到客户端本地(Vue)

生成二维码

首先生成二维码图片的地址

引入jr-qrcode

import jrQrcode from 'jr-qrcode';

生成二维码图片的地址

// 生成二维码地址
getQRCodeUrl(spreadUrl) {const QRCodeUrl = jrQrcode.getQrBase64(spreadUrl);return QRCodeUrl;
}
that.backUrl = jrQrcode.getQrBase64(data.backUrl)

 

展示二维码图片

<img :src="getQRCodeUrl('二维码内容')" alt="" />
<div><el-image fit="cover" :src="backUrl" style="width:175px; height: 175px" />
</div>

下载生成好的二维码图片到本地

// 下载二维码
uploadQRCode(spreadUrl) {const image = new Image();// 解决跨域 canvas 污染问题image.setAttribute("crossOrigin", "anonymous");image.onload = function() {const canvas = document.createElement("canvas");canvas.width = image.width;canvas.height = image.height;const context = canvas.getContext("2d");context.drawImage(image, 0, 0, image.width, image.height);//得到图片的base64编码数据const url = canvas.toDataURL("image/png");// 生成一个 a 标签const a = document.createElement("a");// 创建一个点击事件const event = new MouseEvent("click");// 将 a 的 download 属性设置为我们想要下载的图片的名称,若 name 不存在则使用'图片'作为默认名称a.download = name || "二维码";// 将生成的 URL 设置为 a.href 属性a.href = url;// 触发 a 的点击事件a.dispatchEvent(event);// return a;};image.src = this.getQRCodeUrl('二维码内容');
}

相关文章:

通过jr-qrcode生成二维码并下载到客户端本地(Vue)

生成二维码 首先生成二维码图片的地址 引入jr-qrcode import jrQrcode from jr-qrcode; 生成二维码图片的地址 // 生成二维码地址 getQRCodeUrl(spreadUrl) {const QRCodeUrl jrQrcode.getQrBase64(spreadUrl);return QRCodeUrl; }that.backUrl jrQrcode.getQrBase64(da…...

命令执行漏洞(附例题)

一.原理 应用有时需要调用一些执行系统命令的函数&#xff0c;如PHP中的system、exec、shell_exec、passthru、popen、proc_popen等&#xff0c;当用户能控制这些函数的参数时&#xff0c;就可以将恶意系统命令拼接到正常命令中&#xff0c;从而造成命令执行攻击。 二.利用条…...

iOS开发Swift-类型转换

1.Int或Double转字符串 let x 20 let y "\(x)" let z String(x)2.Double转Int(去掉小数点后面的) Int(1.9)3.Int转Double Double(1)4.向上转型 class A{//A父类 }class B: A{//B子类继承A }let a A() let b B()b as A //子类转化成父类5.向下转型 class A{//A…...

python基础爬虫反爬破解

文章目录 爬虫初识1. HTTP协议与WEB开发&#xff08;1&#xff09;简介&#xff08;2&#xff09;socket套接字&#xff08;3&#xff09;请求协议与响应协议 2. requests&反爬破解&#xff08;1&#xff09;UA反爬&#xff08;2&#xff09;referer反爬&#xff08;3&…...

Maven 必备技能:MAC 系统下 JDK和Maven 安装及环境变量配置详细讲解

开发中难免因系统问题或者版本变更反复折腾JDK和Maven环境变量&#xff0c;干脆写个笔记备忘个&#xff0c;也方便小伙伴们节省时间。 JDK安装与环境变量配置 1.官网下载jdk mac安装包: Java Downloads | Oracle " https://www.oracle.com/java/technologies/downloads…...

electron笔记无边框窗口、DLL调用、DLL函数返回指针

无边框 const win new BrowserWindow({width: 1290,height: 736,minHeight: 736,minWidth: 1040,maxHeight: 736,maxWidth: 1290,frame: false, // 无边框webPreferences: {// preload: process.env.WEBPACK_DEV_SERVER_URL ? __dirname /preload.js : app://./preload.js,…...

递归算法学习——黄金矿工,不同路径III

目录 ​编辑 一&#xff0c;黄金矿工 1.题意 2.题目分析 3.题目接口 4.解题思路及代码 二&#xff0c;不同路径III 1.题意 2.解释 3.题目接口 4.解题思路及代码 一&#xff0c;黄金矿工 1.题意 你要开发一座金矿&#xff0c;地质勘测学家已经探明了这座金矿中的资源…...

pg 创建分区表 --chatGpt

问&#xff1a;postgreSql 创建表 addresses&#xff08;id,mkey,pri,addr),其中 id自增且id值会超过上百亿&#xff0c;mkey长度为8且唯一的字符串&#xff0c;pri长度64的字符串,addr长度64的字符串,用散列分区的方式创建 gpt: 你可以使用 PostgreSQL 来创建一个包含散列分…...

长城网络靶场,第一题笔记

黑客使用了哪款扫描工具对论坛进行了扫描&#xff1f;&#xff08;小写简称&#xff09; 第一关&#xff0c;第三小题的答案是awvs 思路是先统计查询 然后过滤ip检查流量 过滤语句&#xff1a;tcp and ip.addr ip 114.240179.133没有 第二个101.36.79.67 之后找到了一个…...

el-form表单中不同数据类型对应的时间格式化和校验规则

1. 在表单中, 当选择不同的数据类型时, 需要在下面选择时间时和数据类型对应上, 通过监听数据类型的变化, 给时间做格式化, 2. 但是当不按顺序选择数据类型后, 再选时间可能会报错, 所以需要在dom更新后, 再清空表单. 3. 校验规则, 结束时间需要大于开始时间, 但是不能选当前的…...

Python代码雨

系列文章 序号文章目录直达链接1浪漫520表白代码https://want595.blog.csdn.net/article/details/1306668812满屏表白代码https://want595.blog.csdn.net/article/details/1297945183跳动的爱心https://want595.blog.csdn.net/article/details/1295031234漂浮爱心https://want…...

java.util.Optional

原文链接 文章目录 1、Optional作用2、常用API构造相关get / orElse / orElseGet / orElseThrowisPresent / ifPresentfiltermap / flatMap 3、源码翻译 1、Optional作用 类位于&#xff1a;java.util.Optional臭名昭著的空指针异常是导致Java应用程序失败的最常见原因&#…...

微服务--Seata(分布式事务)

TCC模式在代码中实现&#xff1a;侵入性强&#xff0c;并且的自己实现事务控制逻辑 Try&#xff0c;Confirm() cancel() 第三方开源框架&#xff1a;BeyeTCC\TCC-transaction\Himly 异步实现&#xff1a;MQ可靠消息最终一致性 GlobalTransacational---AT模式...

发光太阳聚光器的蒙特卡洛光线追踪研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

(涨知识)-圣诞灯串类产品出口都需要做哪些认证?

1. 首先我们讲讲欧盟&#xff0c; 欧盟一向都是合规要求特别多的一个国家&#xff0c;所以向欧盟出口灯串等电子产品&#xff0c;一定要长个心眼。废话不多说&#xff0c;进入正题吧&#xff01; ①欧盟产品安全&#xff1a;欧代CE(电磁指令EMC低压指令LVD)DOC 产品安全必备三件…...

ROS地图/像素坐标描点调试【Python源码实现】

文章目录 ROS python 地图描点调试工具1. Rviz描点1.1 需求描述1.2 visualization Marker1.3 工程实践 2. 静态地图图片描点2.1 需求描述2.2 工程实践 ROS python 地图描点调试工具 1. Rviz描点 1.1 需求描述 在ROS开发中&#xff0c;有时会加载图片文件转为地图载入move_ba…...

2023年7月京东笔记本电脑行业品牌销售排行榜(京东数据平台)

随着智能手机、平板电脑等移动互联设备的普及&#xff0c;人们对于个人电脑的依赖减轻&#xff0c;加之电脑的更换率较低&#xff0c;因此当前PC端消费市场整体出现疲态&#xff0c;笔记本电脑的出货量不断下降&#xff0c;今年7月份也同样呈现这一趋势。 根据鲸参谋电商数据分…...

用户忠诚度:小程序积分商城的用户保持方法

随着移动互联网的蓬勃发展&#xff0c;小程序积分商城已经成为了许多企业私域营销的热门选择。这个商城不仅可以吸引用户参与&#xff0c;还可以提高用户的忠诚度&#xff0c;进一步加深用户与品牌的互动关系。然而&#xff0c;要实现用户的忠诚度&#xff0c;需要一系列的策略…...

[前端] 使用lerna version更新版本号

lerna version 是一个用于管理 monorepo&#xff08;多包存储库&#xff09;的工具&#xff0c;它可以帮助您在多个相关包之间协调版本号的更新和发布。以下是使用 lerna version 更新版本号的一般步骤&#xff1a; 安装 Lerna&#xff1a; 首先&#xff0c;您需要在您的项目中…...

winform嵌入浏览器 webView2

1、项目引用nuget 2、winform窗体中初始化 var webView new WebView2();webView.Source new Uri(url);webView.Dock DockStyle.Fill;//接收js调用c#函数的消息webView.WebMessageReceived CoreWebView2_WebMessageReceivedAsync; this.panel1.Controls.Add(…...

装饰模式(Decorator Pattern)重构java邮件发奖系统实战

前言 现在我们有个如下的需求&#xff0c;设计一个邮件发奖的小系统&#xff0c; 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其…...

超短脉冲激光自聚焦效应

前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应&#xff0c;这是一种非线性光学现象&#xff0c;主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场&#xff0c;对材料产生非线性响应&#xff0c;可能…...

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 &#xff08;1&#xff09;设置网关 打开VMware虚拟机&#xff0c;点击编辑…...

Go 语言接口详解

Go 语言接口详解 核心概念 接口定义 在 Go 语言中&#xff0c;接口是一种抽象类型&#xff0c;它定义了一组方法的集合&#xff1a; // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的&#xff1a; // 矩形结构体…...

使用van-uploader 的UI组件,结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法&#xff0c;当前调用一个医疗行业的AI识别算法后返回…...

Selenium常用函数介绍

目录 一&#xff0c;元素定位 1.1 cssSeector 1.2 xpath 二&#xff0c;操作测试对象 三&#xff0c;窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四&#xff0c;弹窗 五&#xff0c;等待 六&#xff0c;导航 七&#xff0c;文件上传 …...

群晖NAS如何在虚拟机创建飞牛NAS

套件中心下载安装Virtual Machine Manager 创建虚拟机 配置虚拟机 飞牛官网下载 https://iso.liveupdate.fnnas.com/x86_64/trim/fnos-0.9.2-863.iso 群晖NAS如何在虚拟机创建飞牛NAS - 个人信息分享...

MySQL 索引底层结构揭秘:B-Tree 与 B+Tree 的区别与应用

文章目录 一、背景知识&#xff1a;什么是 B-Tree 和 BTree&#xff1f; B-Tree&#xff08;平衡多路查找树&#xff09; BTree&#xff08;B-Tree 的变种&#xff09; 二、结构对比&#xff1a;一张图看懂 三、为什么 MySQL InnoDB 选择 BTree&#xff1f; 1. 范围查询更快 2…...

规则与人性的天平——由高考迟到事件引发的思考

当那位身着校服的考生在考场关闭1分钟后狂奔而至&#xff0c;他涨红的脸上写满绝望。铁门内秒针划过的弧度&#xff0c;成为改变人生的残酷抛物线。家长声嘶力竭的哀求与考务人员机械的"这是规定"&#xff0c;构成当代中国教育最尖锐的隐喻。 一、刚性规则的必要性 …...