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

I_am_shy 2024-10-21 14:35:02 阅读 69

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>code>

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转二维码失败错误: 

实例代码

<code><!DOCTYPE html>

<html lang="en">code>

<head>

<meta charset="UTF-8">code>

<meta name="viewport" content="width=device-width, initial-scale=1.0">code>

<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>code>

</head>

<body>

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

</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 字符串



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。