javascript如何实现二维码生成？_javascript的图形编码库有哪些？-js教程-PHP中文网

javascript如何实现二维码生成？_javascript的图形编码库有哪些？

幻影之瞳

发布： 2025-12-20 15:26:33

原创

332人浏览过

最常用、轻量且维护活跃的JavaScript二维码生成方式是使用qrcode npm包；它支持Canvas、SVG、Data URL等多种输出格式，兼容浏览器和Node.js，功能全、文档完善、更新频繁。

javascript如何实现二维码生成？_javascript的图形编码库有哪些？

用 JavaScript 生成二维码，最常用、轻量且维护活跃的方式是使用 qrcode.js（即 qrcode-generator）或更现代的 qrcode（@xkeshi/qrcode 或 qrcode npm 包）。它们不依赖 Canvas API 或 DOM，纯 JS 实现，支持浏览器和 Node.js。

主流 JavaScript 二维码生成库

以下库均开源、稳定、社区支持好：

qrcode（npm: qrcode）：功能最全，支持生成 Canvas、SVG、Data URL、UTF8 字符串等多种输出格式；支持自定义纠错等级、颜色、大小、边距；Node.js 和浏览器均可直接用。
qrcode-generator（npm: qrcode-generator）：极简纯算法库，只生成二维数组或字符串形式的 QR 码数据，不带渲染逻辑，适合需要完全自控绘制流程的场景（比如用 WebGL 渲染）。
qr-code-with-logo（npm: qr-code-with-logo）：在 qrcode 基础上扩展，方便嵌入 logo 图标，适合生成带品牌标识的二维码。
jsQR（npm: jsqr）：注意这是识别/解码库，不是生成库——常被混淆，仅作提醒。

浏览器中快速生成并显示二维码

以 qrcode 为例（v1.5+）：

// 安装：npm install qrcode
// 或直接在 HTML 中通过 CDN 引入
// <script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.3/build/qrcode.min.js"></script>

// 生成到 canvas 元素
QRCode.toCanvas(document.getElementById('canvas'), 'https://example.com', {
  width: 200,
  errorCorrectionLevel: 'M'
}, function (error) {
  if (error) console.error(error);
  else console.log('success!');
});

登录后复制

也可生成 SVG 或 Data URL，便于响应式或打印场景：

立即学习“Java免费学习笔记（深入）”；

Phidata

Phidata是一个开源框架，可以快速构建和部署AI智能体应用

173

查看详情

QRCode.toString('Hello', { type: 'svg' }) // 返回 SVG 字符串
QRCode.toDataURL('Hi', { type: 'image/png' }) // 返回 base64 PNG

登录后复制

Node.js 后端生成二维码图片文件

配合 fs 模块可直接写入 PNG 文件（需安装 canvas 依赖）：

const QRCode = require('qrcode');
const fs = require('fs');

QRCode.toFile('./qrcode.png', 'https://nodejs.org', {
  width: 300,
  color: {
    dark: '#333',
    light: '#fff'
  }
}, function (err) {
  if (err) throw err;
  console.log('QR code saved!');
});

登录后复制

若不想引入 canvas，可用 type: 'svg' 输出文本 SVG 再保存为 .svg 文件，零依赖。

基本上就这些。选 qrcode 覆盖 95% 场景，轻量、文档全、更新勤；有特殊定制需求再考虑 qrcode-generator 这类底层库。

以上就是javascript如何实现二维码生成？_javascript的图形编码库有哪些？的详细内容，更多请关注php中文网其它相关文章！