【大前端】前端生成二维码

前端生成二维码有很多方法，常见的做法是使用 JavaScript 库 来生成二维码。下面整理几种常用方案，并附示例代码。

1️⃣ 使用 qrcode 库（推荐）

qrcode 是一个非常流行的前端 JS 库，可以生成 Canvas 或者 SVG 的二维码。

安装（如果是 npm 项目）：

npm install qrcode

示例（生成 Canvas）：

<div id="qrcode"></div>
<script type="module">
import QRCode from 'qrcode'

const qrText = 'https://www.example.com'
const canvas = document.createElement('canvas')
document.getElementById('qrcode').appendChild(canvas)

QRCode.toCanvas(canvas, qrText, { width: 200 }, function (error) {
  if (error) console.error(error)
  else console.log('二维码生成成功')
})
</script>

生成图片（Base64）：

QRCode.toDataURL('https://www.example.com', { width: 200 })
  .then(url => {
    const img = document.createElement('img')
    img.src = url
    document.body.appendChild(img)
  })
  .catch(err => console.error(err))

2️⃣ 使用 qrious 库

qrious 是另一个前端生成二维码的轻量库，支持 Canvas。

安装：

npm install qrious

示例：

<canvas id="qriousCanvas"></canvas>
<script type="module">
import QRious from 'qrious'

const qr = new QRious({
  element: document.getElementById('qriousCanvas'),
  value: 'https://www.example.com',
  size: 200
})
</script>

3️⃣ 使用 react-qr-code（React 项目）

如果你用的是 React，可以用这个库直接生成二维码组件：

npm install react-qr-code

import QRCode from "react-qr-code";

export default function App() {
  return <QRCode value="https://www.example.com" size={200} />;
}

4️⃣ 使用 CDN（无需安装）

如果只是简单页面，可以直接用 CDN：

<script src="https://cdn.jsdelivr.net/npm/qrcode/build/qrcode.min.js"></script>
<div id="qrcode"></div>
<script>
QRCode.toCanvas(document.getElementById('qrcode'), 'https://www.example.com', { width: 200 })
</script>

💡 小贴士：

• width 控制二维码大小。

• 可以生成 Canvas、SVG 或 Base64 图片。

• 对于带 logo 的二维码，可以先生成二维码，再使用 Canvas 绘制 logo。