makeQrTempFile.js 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. import UQRCode from 'uqrcodejs'
  2. /**
  3. * 在组件内隐藏 canvas 上绘制二维码,导出临时文件路径供 <image> 展示。
  4. * @param {object} opts
  5. * @param {string} opts.text 二维码内容(出入库单 id)
  6. * @param {string} opts.canvasId canvas-id
  7. * @param {object} opts.componentInstance 组件实例(getCurrentInstance().proxy)
  8. * @param {number} [opts.size=200]
  9. * @returns {Promise<string>} tempFilePath
  10. */
  11. export function makeQrTempFile({ text, canvasId, componentInstance, size = 200 }) {
  12. const content = String(text || '').trim()
  13. if (!content) {
  14. return Promise.reject(new Error('二维码内容为空'))
  15. }
  16. if (!componentInstance) {
  17. return Promise.reject(new Error('缺少组件实例'))
  18. }
  19. return new Promise((resolve, reject) => {
  20. try {
  21. const qr = new UQRCode()
  22. qr.data = content
  23. qr.size = size
  24. qr.margin = 10
  25. qr.make()
  26. const ctx = uni.createCanvasContext(canvasId, componentInstance)
  27. qr.canvasContext = ctx
  28. qr.drawCanvas()
  29. setTimeout(() => {
  30. uni.canvasToTempFilePath(
  31. {
  32. canvasId,
  33. width: size,
  34. height: size,
  35. destWidth: size,
  36. destHeight: size,
  37. success: (res) => {
  38. if (res.tempFilePath) resolve(res.tempFilePath)
  39. else reject(new Error('二维码导出失败'))
  40. },
  41. fail: (err) => reject(err || new Error('二维码导出失败'))
  42. },
  43. componentInstance
  44. )
  45. }, 120)
  46. } catch (e) {
  47. reject(e)
  48. }
  49. })
  50. }