qrcode js实现
QRCode.js 实现方法
QRCode.js 是一个用于生成二维码的 JavaScript 库，无需依赖其他库。以下是实现方法：
安装与引入 可以通过 npm 安装或直接引入 CDN 链接：
npm install qrcode或
<script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.1/build/qrcode.min.js"></script>基本用法 在 HTML 中创建一个容器元素：
<div id="qrcode"></div>使用 JavaScript 生成二维码：
// 使用 npm 安装时
import QRCode from 'qrcode';
// 生成二维码到 canvas
QRCode.toCanvas(document.getElementById('qrcode'), 'https://example.com', function (error) {
if (error) console.error(error);
});
// 生成二维码图片 URL
QRCode.toDataURL('https://example.com', function (err, url) {
if (err) console.error(err);
const img = document.createElement('img');
img.src = url;
document.body.appendChild(img);
});高级配置 可以自定义二维码的尺寸、颜色等参数：
const options = {
width: 200,
height: 200,
color: {
dark: '#000000',
light: '#ffffff'
}
};
QRCode.toCanvas(document.getElementById('qrcode'), 'https://example.com', options, function (error) {
if (error) console.error(error);
});在 React/Vue 中使用 对于 React 项目，可以封装为组件：
import React, { useEffect, useRef } from 'react';
import QRCode from 'qrcode';
function QRCodeComponent({ text }) {
const canvasRef = useRef(null);
useEffect(() => {
if (canvasRef.current) {
QRCode.toCanvas(canvasRef.current, text, { width: 150 }, (error) => {
if (error) console.error(error);
});
}
}, [text]);
return <canvas ref={canvasRef} />;
}注意事项
- 二维码内容长度会影响生成复杂度，过长的内容可能需要更大的尺寸
- 某些特殊字符可能需要先进行编码处理
- 移动端使用时注意调整二维码尺寸以适应不同屏幕
QRCode.js 支持多种输出格式，包括 SVG、Canvas 和 Data URL，可根据项目需求选择合适的方式。
