来一个简单二维码生成器
背景
日常中经常遇到一些 PC 上的 url
或者 id
想要传送到移动端,或者要更便捷的方式传播数据,这时候就要用到手机扫二维码的情况。
实现效果
安装依赖
我们将使用 qrcode
npm 包去生成二维码,执行以下命令安装好依赖。
npm install --save qrcode
搞下交互
支持修改二维码内容、二维码描述,简简单单搞下交互。
import React, { useState } from 'react';
import QRCode from 'qrcode';
import styles from './style.less';
function App() {
const [qrcodeContent, setQrcodeContent] = useState('');
const [qrcodeDesc, setQrcodeDesc] = useState('');
return (
<div className={styles.container}>
<h3>生成二维码</h3>
<div className={styles.inputItem}>
<label htmlFor="qrcodeContent">二维码内容: </label>
<input
id="qrcodeContent"
type="text"
placeholder="请输入二维码内容"
value={qrcodeContent}
onChange={e => setQrcodeContent(e.target.value)}
/>
</div>
<div className={styles.inputItem}>
<label htmlFor="qrcodeDesc">二维码描述: </label>
<input
id="qrcodeDesc"
type="text"
placeholder="请输入描述内容"
value={qrcodeDesc}
onChange={e => setQrcodeDesc(e.target.value)}
/>
</div>
<div className={styles.btnContainer}>
<input
type="button"
value="生成二维码"
onClick={generateQRCode}
/>
<input
type="button"
value="下载二维码"
onClick={downloadQRCode}
/>
</div>
<canvas id="canvas"></canvas>
</div>
);
}
export default App;
生成二维码
接下来,我们用input
去获取二维码显示的内容,将输入的内容生成对应二维码。
import React, { useState } from 'react';
import QRCode from 'qrcode';
import styles from './style.less';
function App() {
const [qrcodeContent, setQrcodeContent] = useState('');
const [qrcodeDesc, setQrcodeDesc] = useState('');
/**
* 根据输入框内容,生成对应二维码
*/
const generateQRCode = async () => {
let canvasElement = document.getElementById('canvas')
const canvas = await QRCode.toCanvas(canvasElement, qrcodeContent, { margin: 10, width: 200 })
let canvasContext = canvas?.getContext('2d')
let canvasWidth = canvas?.width
canvasContext.textAlign = 'center'
canvasContext.font = '20px serif'
canvasContext.fillText(qrcodeDesc, canvasWidth / 2, 180)
}
return (
...
);
}
export default App;
下载二维码图片
最后,我们将 canvas
转换成 base64
图片,修改 MIME (媒体类型),动态生成 a
标签下载图片。
/**
* 下载二维码
*/
const downloadQRCode = () => {
let canvas = document.getElementById('canvas')
const qrCodeURL = canvas.toDataURL("image/png").replace("image/png", "application/octet-stream")
let aEle = document.createElement("a");
aEle.href = qrCodeURL;
aEle.download = `${qrcodeContent}.png`;
document.body.appendChild(aEle);
aEle.click();
document.body.removeChild(aEle);
}
体验一下
完整的代码我放在 Code Pen 上了,有感兴趣的同学可以看看。
转载自:https://juejin.cn/post/7094799391738822692