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

news2025/1/21 10:18:01

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.coloradmin.cn/o/1880500.html

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

相关文章

Nacos配置中心客户端源码分析(一): 客户端如何初始化配置

本文收录于专栏 Nacos 推荐阅读&#xff1a;Nacos 架构 & 原理 文章目录 前言一、NacosConfigBeanDefinitionRegistrar二、NacosPropertySourcePostProcessor三、AbstractNacosPropertySourceBuilder总结「AI生成」 前言 专栏前几篇文章主要讲了Nacos作为服务注册中心相关…

vmware安装debian11

安装vmware16 下载镜像 https://repo.huaweicloud.com/debian-cd/ https://repo.huaweicloud.com/debian-cd/11.7.0/amd64/iso-dvd/ 安装 安装完成之后重启&#xff0c;输入账号密码进入&#xff0c;安装ssh服务器即可使用

park unpark

目录 一、基本使用 二、特点&#xff08;与 wait/notify 对比&#xff09; 三、park & unpark 的原理 一、基本使用 1. park 和 unpark 是 LockSupport 中的方法 2. LockSupport.park();// 暂停线程&#xff0c;线程进入 WAIT 状态 3. LockSupport.unpark(被暂停的线…

数据产品经理知识库构建

概述 数据产品经理是企业中负责管理和推动数据产品的专业人员。他们利用数据来辅助决策&#xff0c;优化产品&#xff0c;提升用户体验。用STAR法则&#xff08;Situation, Task, Action, Result&#xff09;来介绍数据产品经理的角色&#xff0c;应该学习的数据产品&#…

Linux安装Node-RED并实现后台运行及开机启动

首先确保系统中已近成功安装Node.js&#xff0c;并保证需要的合适版本&#xff1a; 关于node.js的安装可以参考我的另一篇博文:《AliyunOS安装Node.js》。 然后就可以使用npm工具安装Node-RED了&#xff0c;很简单使用如下命令&#xff1a; sudo npm install -g --unsafe-per…

各维度卷积神经网络内容收录

各维度卷积神经网络内容收录 卷积神经网络&#xff08;CNN&#xff09;&#xff0c;通常是指用于图像分类的2D CNN。但是&#xff0c;现实世界中还使用了其他两种类型的卷积神经网络&#xff0c;即1D CNN和3D CNN。 在1D CNN中&#xff0c;内核沿1个方向移动。1D CNN的输入和…

可信和可解释的大语言模型推理-RoG

大型语言模型&#xff08;LLM&#xff09;在复杂任务中表现出令人印象深刻的推理能力。然而&#xff0c;LLM在推理过程中缺乏最新的知识和经验&#xff0c;这可能导致不正确的推理过程&#xff0c;降低他们的表现和可信度。知识图谱(Knowledge graphs, KGs)以结构化的形式存储了…

模板方法模式在金融业务中的应用及其框架实现

引言 模板方法模式&#xff08;Template Method Pattern&#xff09;是一种行为设计模式&#xff0c;它在一个方法中定义一个算法的框架&#xff0c;而将一些步骤的实现延迟到子类中。模板方法允许子类在不改变算法结构的情况下重新定义算法的某些步骤。在金融业务中&#xff…

Python技术笔记汇总(含语法、工具库、数科、爬虫等)

对Python学习方法及入门、语法、数据处理、数据可视化、空间地理信息、爬虫、自动化办公和数据科学的相关内容可以归纳如下&#xff1a; 一、Python学习方法 分解自己的学习目标&#xff1a;可以将学习目标分基础知识&#xff0c;进阶知识&#xff0c;高级应用&#xff0c;实…

【简易版tinySTL】 哈希表与移动语义

基本概念 哈希表&#xff08;HashTable&#xff09;是一个重要的底层数据结构, 无序关联容器包括unordered_set, unordered_map内部都是基于哈希表实现。 哈希表是一种通过哈希函数将键映射到索引的数据结构&#xff0c;存储在内存空间中。哈希函数负责将任意大小的输入映射到…

谷歌开发者新号上架攻略:开发者实战经验分享

前段时间&#xff0c;不少开发者朋友们在纷纷在吐槽新账号没法上架成功。以前谷歌对新号是真的很严格&#xff0c;但现在情况似乎有所好转。 今天&#xff0c;和大家聊聊如何在新号成功上架上“快人一步”&#xff0c;以及怎样增加账号权重提高上架成功率。 首先&#xff0c;我…

Spring MVC中的DispatcherServlet、HandlerMapping和ViewResolver的作用

在Spring MVC框架中&#xff0c;DispatcherServlet、HandlerMapping和ViewResolver是核心组件&#xff0c;它们各自承担着不同的角色和任务&#xff1a; 1.DispatcherServlet&#xff1a;它是Spring MVC生命周期中的前端控制器&#xff0c;负责接收HTTP请求并将它们分发给相应的…

Echarts地图实现:各省市计划录取人数

Echarts地图实现&#xff1a;各省市计划录取人数 实现功能 本文将介绍如何使用 ECharts 制作一个展示中国人民大学2017年各省市计划录取人数的地图。我们将实现以下图表形式&#xff1a; 地图&#xff1a;基础的地图展示&#xff0c;反映不同省市的录取人数。散点图&#xf…

vue3+ts+vite项目中使用spreadjs,通过script标签引入spreadjs可以提高打包速度

https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/quickstart/quickstart-js 右键另存这个官方的示例页面可以下载全部js文件 https://demo.grapecity.com.cn/SpreadJS/WebDesigner/index.html spread.html: <!DOCTYPE html> <html lang"zh">…

问题处理记录与深入:系统线程耗尽,Java无法调用native方法新建线程

1. 问题处理记录 1.1 问题描述 公司使用Presto作为OLAP查询引擎&#xff0c;Presto的coordinator节点在运行过程中报错 java.lang.OutOfMemoryError: unable to create native thread: possibly out of memory or process/resource limits reachedat java.base/java.lang.Thre…

用Roofline模型去分析pytorch和Triton算子

用Roofline模型去分析pytorch和Triton算子 1.参考链接2.测试环境3.安装相关依赖4.锁频5.获取理论算力6.创建测试脚本7.运行测试程序生成Roofline图8.NVIDIA Nsight Compute生成Roofline9.效果图A.nn.LinearB.Triton实现 本文演示了如何用Roofline模型去分析pytorch和Triton算子…

Mx Admin 基于react18的后台管理系统

前言 Mx Admin 基于React18 vite5 antd5的后台管理系统&#xff0c; 基于RBAC的权限控制系统&#xff0c;动态菜单和动态路由支持tab路由缓存嵌套菜单支持多种菜单布局模式亮暗色主题切换

AttGAN实验复现 2024

AttnGAN 代码复现 2024 文章目录 AttnGAN 代码复现 2024简介环境python 依赖数据集TrainingPre-train DAMSMTrain AttnGAN SamplingB_VALIDATION 为 False (默认)B_VALIDATION 为 True 参考博客 简介 论文地址&#xff1a; https://arxiv.org/pdf/1711.10485.pdf 代码 python…

Unity实现简单的MVC架构

文章目录 前言MVC基本概念示例流程图效果预览后话 前言 在Unity中&#xff0c;MVC&#xff08;Model-View-Controller&#xff09;框架是一种架构模式&#xff0c;用于分离游戏的逻辑、数据和用户界面。MVC模式可以帮助开发者更好地管理代码结构&#xff0c;提高代码的可维护性…

【web】2、集成插件

1、element-plus 官网地址:设计 | Element Plus 安装 plus 及 icon 图标库 1.1 官网提供plus安装方法&#xff1a; 1.2 官网提供 icon 安装方法 1.3 安装 pnpm install element-plus element-plus/icons-vue main.ts全局安装element-plus,element-plus默认支持语言英语设…