js 怎么生成二维码-js教程-PHP中文网

js 怎么生成二维码

煙雲

发布： 2025-08-22 15:07:01

原创

670人浏览过

答案是使用JS库如qrcode.js或qrious可轻松生成二维码，通过设置数据、颜色、大小、容错率等参数生成图像，支持浏览器和Node.js环境，添加Logo需注意遮挡问题，若无法扫描需检查数据、尺寸、对比度、容错率等因素。

js 怎么生成二维码

生成二维码，简单来说，就是把信息编码成一种图形，方便手机扫一扫就能读取。JS实现这个功能，有很多现成的库可以用，比如qrcode.js，或者更现代一些的qrious。它们帮你处理了复杂的编码过程，你只需要提供数据，就能得到二维码的图片。

生成二维码的本质，是把文本信息转换成一种特定的矩阵图案。这个过程涉及到字符编码、纠错码的生成、以及最终的图像绘制。

解决方案

选择合适的JS库：
- qrcode.js: 一个老牌的库，兼容性好，但可能体积稍大。使用简单，文档也比较完善。
- qrious: 一个轻量级的库，依赖少，生成速度快。API设计简洁，适合对性能有要求的场景。
- 还有其他的库，比如jsqrcode，但是可能维护较少。
引入JS库：

可以通过CDN引入，也可以下载到本地引入。例如，使用qrcode.js：
```
<script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
```
登录后复制

编写JS代码生成二维码：

使用qrcode.js的例子：

// 获取要生成二维码的容器
const qrcodeContainer = document.getElementById("qrcode");

// 要编码的数据
const data = "https://www.example.com";

// 创建QRCode对象
const qrcode = new QRCode(qrcodeContainer, {
  text: data,
  width: 128,
  height: 128,
  colorDark : "#000000",
  colorLight : "#ffffff",
  correctLevel : QRCode.CorrectLevel.H
});

// 或者，如果你想手动创建img标签：
// const qrcode = new QRCode({
//   content: data,
//   padding: 4,
//   width: 256,
//   height: 256,
//   color: "#000000",
//   background: "#ffffff",
//   ecl: 'M',
// });

// let img = document.createElement('img');
// img.src = qrcode.img.src;
// document.body.appendChild(img);

登录后复制

使用qrious的例子：

const qr = new QRious({
  element: document.getElementById('qrcode'),
  value: 'https://www.example.com',
  size: 256
});

登录后复制

HTML结构：

宣小二
宣小二：媒体发稿平台，自媒体发稿平台，短视频矩阵发布平台，基于AI驱动的企业自助式投放平台。

21

查看详情
```
<div id="qrcode"></div>
```
登录后复制

如何自定义二维码的样式？

二维码的样式定制，主要集中在颜色、大小、容错率、以及是否添加logo。

颜色： qrcode.js和qrious都允许你自定义前景色（
```
colorDark
```
登录后复制
）和背景色（
```
colorLight
```
登录后复制
）。
大小： 通过
```
width
```
登录后复制
和
```
height
```
登录后复制
参数设置。注意，二维码的大小会影响扫描的距离。
容错率： 容错率越高，二维码的抗干扰能力越强，但同时也会增加二维码的复杂度。qrcode.js提供了四个容错等级：
```
L
```
登录后复制
(Low),
```
M
```
登录后复制
(Medium),
```
Q
```
登录后复制
(Quartile),
```
H
```
登录后复制
(High)。
添加Logo： 这稍微复杂一些。你需要先将Logo图片绘制到Canvas上，然后将Canvas的内容覆盖到二维码的中心区域。需要注意的是，Logo不能遮挡太多的二维码信息，否则会影响扫描。一些库提供了添加logo的选项，但是可能需要手动实现。

如何在Node.js环境中使用JS生成二维码？

在Node.js环境中使用JS生成二维码，你需要一个支持Canvas的库，比如

node-canvas

登录后复制

。

安装依赖：
```
npm install qrcode node-canvas
```
登录后复制

编写Node.js代码：

const QRCode = require('qrcode');
const { createCanvas, loadImage } = require('canvas');
const fs = require('fs');

async function generateQRCode(text, filename) {
  try {
    const canvas = createCanvas(200, 200);
    await QRCode.toCanvas(canvas, text, { errorCorrectionLevel: 'H' });

    const out = fs.createWriteStream(__dirname + `/${filename}.png`)
    const stream = canvas.createPNGStream()
    stream.pipe(out)
    out.on('finish', () =>  console.log('Done generating QR code!'))

  } catch (err) {
    console.error(err)
  }
}

generateQRCode('https://www.example.com', 'myqrcode');

登录后复制

这段代码会生成一个名为