来一个简单二维码生成器

背景

日常中经常遇到一些 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 上了，有感兴趣的同学可以看看。