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

最新推荐文章于 2024-08-21 08:50:28 发布

I_am_shy

最新推荐文章于 2024-08-21 08:50:28 发布

阅读量1.2k

点赞数 3

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/I_am_shy/article/details/140044496

版权

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类时，会自动生成二维码

生成二维码的实例

首先要注意几个问题

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

尝试将图片的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>