使用 qrcode 插件封装的根据传入的内容生成并返回可用于 img 的 src 属性正常显示的图片路径的方法。

下方示例在 vue 项目中的使用流程：

安装qrcode

npm i qrcode

方法代码

注：方法返回 Promise 但没有返回 reject 个人可根据自己的需求修改代码

// 导入安装成功的 qrcode 插件
import QRCode from 'qrcode'

/**
 * 根据传入内容生成图片路径
 * @returns {String} 返回图片路径（注：返回的是 Promise 请使用 .then 或者 await/async 方式获取返回值，失败时返回 ''）
 */
const createImgUrl = (text) => {
  return new Promise((resolve, reject) => {
    const canvas = document.createElement('canvas')
    const ctx = canvas.getContext('2d')
    QRCode.toCanvas(text, { canvas: ctx.canvas }, (error, canvasEl) => {
      if (canvasEl) {
        const url = canvasEl.toDataURL('image/png')
        console.log('路径', url)
        resolve(url)
        return
      }
      if (error) {
        console.error('生成图片路径失败', error)
        resolve('')
        return
      }
      resolve('')
      return
    })
  })
}

效果演示

注：返回的图片路径是 base64 格式的。