前端 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)!