1. 需求分析
- 需要将输入的值转换为图片资源;
- 由于只是单纯的展示,所以不需要很多比如加 logo 等复杂功能;
- 不需要后端生成,直接前端操作;
- 使用的第三方库尽可能小,功能单一;
- 最后选择使用 qrcode-generator 库,只有 40kb。
2. 使用第三方库
qrcode-generator
3. 转换 base64 方法
export const createQrCodeImg = function (text, options) {options = options || {};var typeNumber = options.typeNumber || 4;var errorCorrectLevel = options.errorCorrectLevel || 'M';var size = options.size || 500;var qr;try {qr = qrcode(typeNumber, errorCorrectLevel || 'M');qr.addData(text);qr.make();} catch (e) {if (typeNumber >= 40) {throw new Error('Text too long to encode');