js自定义内容生成二维码,qrcodejs的使用

qrcodejs

qrcodejs是基于原生js的文本转换成二维码的库,轻量且使用方法简单,它的实现原理是通过canvas将重新编码的内容绘制在页面元素上,

使用qrcodejs时可以选择引入它的cdn或者使用npm下载

 <script type="text/javascript" src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/qrcodejs/1.0.0/qrcode.min.js"></script>
npm install qrcodejs --save

qrcodejs官网:  qrcode.js (davidshimjs.github.io)

使用方法

new QRCode(dom, text);dom:一个dom元素
text:存入二维码中的文本内容let qrcode = new QRCode(dom, option);dom:一个dom元素
option:一个配置对象,参数如下图

实例化QRCode类时,会自动生成二维码

 生成二维码的实例

首先要注意几个问题

  1. 只能将字符串类型的数据转成二维码,
  2. 当字符串被识别成网址时,会自动识别网站跳转,否则直接显示字符串内容
  3. 二维码能存储的最大容量只有3kb,超过这个值会产生错误(下图)
  4. 二维码存储图片或其他类型(音频,视频)的文件,应该将文件上传到服务器,再由服务器提供访问地址,将地址转成二维码
  5. 二维码有很强的区分识别能力,即使二维码不是完整的(部分遮挡)也不影响识别,所以可以在这个基础上生成不同风格的二维码(如,放一个很小的图片在中间)

尝试将图片的base64转二维码失败错误: 

实例代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>二维码</title><script type="text/javascript" src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/qrcodejs/1.0.0/qrcode.min.js"></script>
</head>
<body><div id="test"></div>
</body>
<script>
// 创建一个QR Code实例
let qrcode = new QRCode(document.getElementById("test"), {text: "hello world",width: 128,height: 128,colorDark: "#000000",colorLight: "#ffffff",
})
console.log(qrcode);
</script>
</html> 

这个二维码的内容为 hello world 字符串

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

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

相关文章

Linux的IO易错点总结

本文主要记录IO的一些易错操作。 阻塞IO和非阻塞IO&#xff0c;一般都是针对数据读取的&#xff0c;因为write是主动行为&#xff0c;不存在阻塞这一说。 非阻塞式IO&#xff0c;一般都要配合while轮询来读取数据。 IO多路复用 当只检测一路IO的时候&#xff0c;和普通IO的作…

软考满分范文“论模型驱动架构设计方法及其应用”,软考高级,系统架构设计师

论文真题 模型驱动架构设计是一种用于应用系统开发的软件设计方法,以模型构造、模型转换和精化为核心,提供了一套软件设计的指导规范。在模型驱动架构环境下,通过创建出机器可读和高度抽象的模型实现对不同问题域的描述,这些模型独立于实现技术,以标准化的方式储存,利用…

linux unzip指令

在Linux中&#xff0c;unzip 命令通常用于解压 .zip 文件。默认情况下&#xff0c;unzip 命令会输出解压过程中的一些信息&#xff0c;但不会生成一个完整的报告。但是&#xff0c;你可以通过重定向输出和结合其他命令来生成一个更详细的报告。 以下是一些方法来使用 unzip 命…

鸿蒙开发Ability Kit(程序框架服务):【向用户申请授权】

向用户申请授权 当应用需要访问用户的隐私信息或使用系统能力时&#xff0c;例如获取位置信息、访问日历、使用相机拍摄照片或录制视频等&#xff0c;应该向用户请求授权&#xff0c;这部分权限是user_grant权限。 当应用申请user_grant权限时&#xff0c;需要完成以下步骤&a…

[AIGC] 深入理解 Crontab:定时任务的艺术

在 Unix 或者 Linux 环境下&#xff0c;有一种被广泛使用的工具可以帮助我们自动执行定时任务&#xff0c;那就是 crontab。本篇文章将带你详细了解 crontab 的相关知识。 文章目录 1. 什么是 Crontab2. Crontab 的结构3. 如何使用 Crontab4. 注意事项 相关疑问1. crontab的系统…

6.The hardest part about learing hard things(学一件难的事,难在哪里)

I’ve been recording a lot of podcast interviews for my upcoming book, Ultralearning.One of the reurring themes I’ve noticed in our conversations is that how people feel about learning is the overwhelming cause of the results they experience. 我为我的新书…

IOS越狱源集合(2024)

常用源 https://wwg135.github.io https://huayuarc.cn/ https://cydia.akemi.ai/ https://laileld.github.io/repo https://themepro.yourepo.com/ https://apt.geometricsoftware.se/ https://repo.anthopak.dev https://www.yourepo.com/ https://julio.hackyouriphone.org…

[leetcode]beautiful-arrangement. 优美的排列

. - 力扣&#xff08;LeetCode&#xff09; class Solution { public:vector<vector<int>> match;vector<int> vis;int num;void backtrack(int index, int n) {if (index n 1) {num;return;}for (auto &x : match[index]) {if (!vis[x]) {vis[x] tru…

python工程打包成exe

1. 使用PyInstaller PyInstaller是打包Python程序最流行的工具之一&#xff0c;它可以生成独立可执行的程序。 参数及其作用&#xff1a; 打包类型&#xff1a; - -F, --onefile&#xff1a;生成单个可执行文件。 - -D, --onedir&#xff1a;生成包含多个文件的可执行目录&am…

深入解析高斯过程:数学理论、重要概念和直观可视化全解

与其他算法相比&#xff0c;高斯过程不那么流行&#xff0c;但是如果你只有少量的数据&#xff0c;那么可以首先高斯过程。在这篇文章中&#xff0c;我将详细介绍高斯过程。并可视化和Python实现来解释高斯过程的数学理论。 多元高斯分布 多元高斯分布是理解高斯过程所必须的概…

flink使用StatementSet降低资源浪费

背景 项目中有很多ods层&#xff08;mysql 通过cannal&#xff09;kafka&#xff0c;需要对这些ods kakfa做一些etl操作后写入下一层的kafka&#xff08;dwd层&#xff09;。 一开始采用的是executeSql方式来执行每个ods→dwd层操作&#xff0c;即类似&#xff1a; def main(…

MySQL影院订票系统

DDL -- 影院表 CREATE TABLE Theaters (TheaterID INT PRIMARY KEY,Name VARCHAR(100),Address VARCHAR(200) );-- 电影表 CREATE TABLE Movies (MovieID INT PRIMARY KEY,Title VARCHAR(100),ReleaseDate DATE );-- 放映场次表 CREATE TABLE Showings (ShowingID INT PRIMARY…

观察者模式在金融业务中的应用及其框架实现

引言 观察者模式&#xff08;Observer Pattern&#xff09;是一种行为设计模式&#xff0c;它定义了一种一对多的依赖关系&#xff0c;使得多个观察者对象同时监听某一个主题对象。当这个主题对象发生变化时&#xff0c;会通知所有观察者对象&#xff0c;使它们能够自动更新。…

MISRA C

介绍 MISRA C 是由汽车产业软件可靠性协会&#xff08;Motor Industry Software Reliability Association&#xff09;提出的 C 语言编程标准&#xff0c;可提高嵌入式系统软件的安全性和可靠性。这些指南由汽车制造商、零部件供应商和工程咨询公司合作的汽车工业软件可靠性协…

基于STM32的智能农业环境监控系统

目录 引言环境准备智能农业环境监控系统基础代码实现&#xff1a;实现智能农业环境监控系统 4.1 数据采集模块4.2 数据处理与分析4.3 控制系统实现4.4 用户界面与数据可视化应用场景&#xff1a;农业环境管理与优化问题解决方案与优化收尾与总结 1. 引言 智能农业环境监控系…

网络运维管理行业的痛点和难点

网络运维管理是确保企业网络稳定、高效运行的关键环节&#xff0c;然而在实际操作中&#xff0c;该行业面临着诸多痛点和难点。这些挑战不仅影响了运维工作的效率&#xff0c;还可能对企业的正常运营造成潜在威胁。本文将深入探讨网络运维管理行业的痛点和难点&#xff0c;以期…

博客一周年:回首与展望

博客一周年&#xff1a;回首与展望 前言 时光荏苒&#xff0c;转眼间我的博客已经陪伴我走过了整整一年的时光。在这一年里&#xff0c;我见证了博客从无到有的过程&#xff0c;也见证了它逐渐成长的点点滴滴。今天&#xff0c;我想借此机会回顾一下这一年的经历&#xff0c;…

ComfyUI高清放大的四种方式(工作流附件在最后)

方式一&#xff1a;Latent放大工作流 1.工作流截图 方式二&#xff1a;ESRGAN&#xff08;传统模型&#xff09;放大工作流 方式三&#xff1a;算法放大&#xff08;后期处理&#xff09;工作流 方式四&#xff1a;Ultimate SD Upscale工作流 这个方式的优势是对于显存底的用…

istitle()方法——判断首字母是否大写其他字母小写

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 语法参考 istitle()方法用于判断字符串中所有的单词首字母是否为大写而其他字母为小写。istitle()方法的语法格式如下&#xff1a; str.istitle() …

2024深圳入户新规出炉!快速了解你的入户“绿色通道”

​朋友们&#xff0c;听说你们都在琢磨深圳户口这事儿&#xff1f;没买房的也想来凑凑热闹&#xff0c;其实&#xff0c;深圳户口不仅仅是为了买房&#xff0c;更多的是为了孩子教育、住房申请、医疗福利等等。各位想在深圳这片热土上大展拳脚的朋友们&#xff0c;现在好消息来…