vue3使用qrcodejs2-fix生成背景透明的二维码

qrcodejs官方仓库:GitHub - davidshimjs/qrcodejs: Cross-browser QRCode generator for javascript

qrcodejs2-fix 是一个用于生成QR码的JavaScript库,使用的时候先安装,然后通过设置前景色和背景色可以控制显示的二维码效果。想生成透明背景的二维码也可以,我通过下面配置前景色和背景色实现了下面的效果:背景透明

    new QRCode(document.getElementById('blueCode'), {text: blueUrl, // 扫码后显示的内容, 如果页面链接, 扫码后会直接跳转到链接width: 200, //二维码宽height: 200, //二维码高colorDark: '#ffffff',colorLight: '#ffffff00',  // 透明背景})

安装和使用

安装

npm install qrcodejs2-fix

引入:

import QRCode from 'qrcodejs2-fix';

在页面中定义容器:

<div id="code"></div>

定义生成二维码的函数:

const getCode = () => {document.getElementById("code").innerHTML = ""; //清空标签内原有数据,防止多次点击生成多个二维码new QRCode(document.getElementById("code"), {text: '000000'});
};

 调用函数:

<a-button @click="getCode">点击获取二维码</a-button>

QRCode参数说明

参数说明默认值
text需要编码的文字内容-
width图像宽度256
height图像高度256
colorDark前景色#000000
colorLight背景色#ffffff
correctLevel容错级别,可设置为:QRCode.CorrectLevel.L、QRCode.CorrectLevel.M、QRCode.CorrectLevel.Q、QRCode.CorrectLevel.HQRCode.CorrectLevel.L
typeNumber二维码类型(1~40,输入 0 以自动检测)4

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

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

相关文章

手撕算法-二叉树的镜像

题目描述 操作给定的二叉树&#xff0c;将其变换为源二叉树的镜像。数据范围&#xff1a;二叉树的节点数 0≤_n_≤1000 &#xff0c; 二叉树每个节点的值 0≤_val_≤1000要求&#xff1a; 空间复杂度 O(n) 。本题也有原地操作&#xff0c;即空间复杂度 O(1) 的解法&#xff0c…

士兵排列问题

解法一&#xff1a; deque实现队头入队和队尾入队即可得到编号排列&#xff0c;每个士兵有二个属性&#xff1a;编号、能力值。 #include<iostream> #include<algorithm> #include<deque> #include<vector> using namespace std; #define endl \n st…

汇率与政治的关系?Anzo Capital实例举证

投资者在使用特定货币对交易时&#xff0c;交易者应关注交易所用货币国家的主要政治新闻。众所周知&#xff0c;政治和金融密切相关&#xff0c;因此重要政治消息的发布会对汇率产生强烈影响。 Anzo Capital实例举证&#xff1a;汇率与政治的关系。 其中一个例子&#xff0c…

文件系统 与 软硬链接

目录 一、文件系统 认识磁盘 磁盘存储的逻辑抽象结构 块组的内容 inode Table Data blocks inode Bitmap Block Bitmap Group Descriptor Table Super Block 理解目录 二、软硬链接 软链接​ 硬链接 硬链接数 一、文件系统 之前的博客主题叫做"进程打开文…

【物联网应用】基于云计算的智能化温室种植一体化平台

目录 第一章 作品概述 1.1. 作品名称 1.2. 应用领域 1.3.主要功能 1.4.创新性说明 第二章 需求分析 2.1 现实背景 2.2 用户群体及系统功能 2.3 竞品分析 第三章 技术方案 3.1. 硬件组成与来源 3.2. 硬件设计合理性 3.3. 硬件系统设计图 3.4. 接口的通用性与可扩展性 3.5. 代码规…

vue中判断是否使用自定义插槽

在封装自定义组件时&#xff0c;需要判断使用者是否使用了插槽<slot"aaa">&#xff0c;如果没有则使用一个组件中默认的值&#xff0c;反之就用传入的内容<template name"aaa"></template>,实现如下&#xff1a; <div class"lin…

苍穹外卖-day06:HttpClient、微信小程序开发、微信登录(业务流程)、导入商品浏览功能代码(业务逻辑)

苍穹外卖-day06 课程内容 HttpClient微信小程序开发微信登录导入商品浏览功能代码 功能实现&#xff1a;微信登录、商品浏览 微信登录效果图&#xff1a; 商品浏览效果图&#xff1a; 1. HttpClient 1.1 介绍 HttpClient 是Apache Jakarta Common 下的子项目&#xff0c;…

文件系统I/O FATFS RW 源码分析

文件系统I/O FATFS RW 源码分析 0 参考 FatFs 是用于小型嵌入式系统的通用 FAT/exFAT 文件系统模块。FatFs 整个项目都按照 ANSI C (C89) 编写。与存储器 I/O 解耦良好&#xff0c;便于移植到 8051、PIC、AVR、ARM、Z80、RX 等小型微控制器中。 下面是关于 FAT 文件系统格式…

20.回文链表

给你一个单链表的头节点 head &#xff0c;请你判断该链表是否为 回文链表 。如果是&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 示例 1&#xff1a; 输入&#xff1a;head [1,2,2,1] 输出&#xff1a;true示例 2&#xff1a; 输入&#xff1a;head …

linux 安装常用软件

文件传输工具 sudo yum install –y lrzsz vim编辑器 sudo yum install -y vimDNS 查询 sudo yum install bind-utils用法可以参考文章 《掌握 DNS 查询技巧&#xff0c;dig 命令基本用法》 net-tools包 yum install net-tools -y简单用法&#xff1a; # 查看端口占用情况…

【学习学习】学习金字塔

学习金字塔&#xff08;Cone of Learning&#xff09;&#xff0c;全称学习吸收率金字塔&#xff0c;是一种现代学习方式的理论。网上流传它是美国缅因州的国家训练实验室&#xff08;National Training Laboratories&#xff09;研究成果&#xff0c;用数字形式形象显示了采用…

【重温设计模式】观察者模式及其Java示例

观察者模式的概念和原理 在编程世界中&#xff0c;设计模式作为一种解决问题的策略&#xff0c;它的存在就如同人类语言中的成语&#xff0c;是一种经过时间考验的有效解决方案。 观察者模式就是其中一种重要的设计模式&#xff0c;它在很多场景中都有着广泛的应用。那么&…

外包干了5天,技术退步明显。。。。

说一下自己的情况&#xff0c;本科生&#xff0c;19年通过校招进入广州某软件公司&#xff0c;干了接近4年的功能测试&#xff0c;今年年初&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能测试&a…

Java项目:63 ssm网上花店设计+vue

作者主页&#xff1a;舒克日记 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文中获取源码 项目介绍 系统具备友好性且功能完善。管理员登录进入后台之后&#xff0c;主要完成花材选择管理&#xff0c;用户管理&#xff0c;鲜花管理&#xff0c;鲜花出入…

【数据结构与算法】(16):桶除了能装饭还能排序?

&#x1f921;博客主页&#xff1a;Code_文晓 &#x1f970;本文专栏&#xff1a;数据结构与算法 &#x1f63b;欢迎关注&#xff1a;感谢大家的点赞评论关注&#xff0c;祝您学有所成&#xff01; ✨✨&#x1f49c;&#x1f49b;想要学习更多数据结构与算法点击专栏链接查看&…

源神,启动!马斯克开源史上最大模型Grok,参数高达3140亿,可商用!

马斯克真不愧是源神&#xff0c;自开源X的推荐算法以及特斯拉智能驾驶算法后&#xff0c;又说到做到&#xff0c;开源旗下大模型Grok&#xff01; 代码和模型权重已上线GitHub。官方信息显示&#xff0c;此次开源的Grok-1是一个3140亿参数的混合专家模型&#xff0c;远超OpenAI…

HTML选择文件的实时预览

HTML选择文件的实时预览 目录 HTML选择文件的实时预览HTML代码JS代码预览 HTML代码 <input type"file" id"adv_img_input" style"width: 1000px ;height:30px"> <img src"#"id"adv_img">JS代码 <script>…

配置OGG 如何批量修改源端及目标端序列值_满足客户变态需求学会这招你就赚了

欢迎您关注我的公众号【尚雷的驿站】 **************************************************************************** 公众号&#xff1a;尚雷的驿站 CSDN &#xff1a;https://blog.csdn.net/shlei5580 墨天轮&#xff1a;https://www.modb.pro/u/2436 PGFans&#xff1a;ht…

WanAndroid(鸿蒙版)开发的第三篇

前言 DevEco Studio版本&#xff1a;4.0.0.600 WanAndroid的API链接&#xff1a;玩Android 开放API-玩Android - wanandroid.com 其他篇文章参考&#xff1a; 1、WanAndroid(鸿蒙版)开发的第一篇 2、WanAndroid(鸿蒙版)开发的第二篇 3、WanAndroid(鸿蒙版)开发的第三篇 …

2024年3月GESP认证Scratch图形化编程四级真题及答案

GESP 图形化四级试卷 &#xff08;满分&#xff1a;100 分 考试时间&#xff1a;120 分钟&#xff09; 学校&#xff1a; 姓名&#xff1a; ​ 一、单选题&#xff08;共 10 题&#xff0c;每题 2 分&#xff0c;共 30 分&#xff09; 题号 1 2 3 4 5 6 7 8 9 10 11 1…