前端 js + qrcode 根据指定内容生成二维码图片路径方法封装

使用 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 格式的。

原文地址：https://blog.csdn.net/qq_43551801/article/details/137495474

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！