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

前端生成二维码有很多方法,常见的做法是使用 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。


相关推荐
李鸿耀14 小时前
主题换肤指南:设计到开发的完整实践
前端
带娃的IT创业者19 小时前
TypeScript + React + Ant Design 前端架构入门:搭建一个 Flask 个人博客前端
前端·react.js·typescript
非凡ghost20 小时前
MPC-BE视频播放器(强大视频播放器) 中文绿色版
前端·windows·音视频·软件需求
Stanford_110620 小时前
React前端框架有哪些?
前端·微信小程序·前端框架·微信公众平台·twitter·微信开放平台
洛可可白20 小时前
把 Vue2 项目“黑盒”嵌进 Vue3:qiankun 微前端实战笔记
前端·vue.js·笔记
学习同学21 小时前
从0到1制作一个go语言游戏服务器(二)web服务搭建
服务器·前端·golang
-D调定义之崽崽21 小时前
【初学】调试 MCP Server
前端·mcp
四月_h21 小时前
vue2动态实现多Y轴echarts图表,及节点点击事件
前端·javascript·vue.js·echarts
文心快码BaiduComate1 天前
用Zulu轻松搭建国庆旅行4行诗网站
前端·javascript·后端
行者..................1 天前
手动编译 OpenCV 4.1.0 源码,生成 ARM64 动态库 (.so),然后在 Petalinux 中打包使用。
前端·webpack·node.js