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

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


相关推荐
两个西柚呀4 小时前
未在props中声明的属性
前端·javascript·vue.js
子伟-H57 小时前
App开发框架调研对比
前端
桃子不吃李子7 小时前
axios的二次封装
前端·学习·axios
SteveJrong7 小时前
面试题 - JavaScript
前端·javascript·面试·ecmascript·基础·找工作·红宝书
阿金要当大魔王~~7 小时前
uniapp 页面标签 传值 ————— uniapp 定义 接口
前端·javascript·uni-app·1024程序员节
全栈软件开发7 小时前
uniapp三端影视源码苹果cms自动采集电影视频网站源码前端源码带VIP
前端·uni-app·影视源码
chxii8 小时前
10.4FormData :前端文件上传与表单数据处理的核心工具
前端
AntBlack8 小时前
不当韭菜 : 好像真有点效果 ,想藏起来自己用了
前端·后端·python
楊无好8 小时前
react中props的使用
前端·react.js·前端框架
一个处女座的程序猿O(∩_∩)O8 小时前
Vue-Loader 深度解析:原理、使用与最佳实践
前端·javascript·vue.js