canvas的下载

131 阅读1分钟

这里用的qrcode生成的二维码,但是使用canvas实现的

<qrcode id="qrcodeRef" ref="qrcodeRef" :value="state.qrcodeValue" :size="200" level="H"></qrcode>

拿到二维码的base64 换到Blob 最后下载

// 下载二维码
const downloadQrCode = () => {
  let myCanvas = document.getElementById('qrcodeRef')
  let imgURL = myCanvas.toDataURL('image/png')
  const blob = base64ToBlob(imgURL)
  const link = document.createElement('a')
  link.href = window.URL.createObjectURL(blob)
  link.download = 'QRcode'
  document.body.appendChild(link)
  const evt = document.createEvent('MouseEvents')
  evt.initEvent('click', false, false)
  link.dispatchEvent(evt)
  document.body.removeChild(link)
}
let base64ToBlob = (base64) => {
  const parts = base64.split(';base64,')
  const contentType = parts[0].split(':')[1]
  const raw = window.atob(parts[1])
  const rawLength = raw.length
  const uInt8Array = new Uint8Array(rawLength)
  for (let i = 0; i < rawLength; ++i) {
    uInt8Array[i] = raw.charCodeAt(i)
  }
  return new Blob([uInt8Array], { type: contentType })
}