vue3手机端canvas转图片

手机端生成二维码

首先，vue3生成二维码一般使用工具来进行生成，我使用的是qrcode.vue。
官方链接如下：
(github)qrcode.vue
通过该链接可以查看到具体的参数详情。

参数	含义	示例
value	二维码的内容值	https://www.baidu.com
size	二维码的大小	100
render-as	生成二维码的 HTML 标签，可选 canvas 或 svg。其中 svg 可以用于 SSR	canvas
margin	定义空白区的宽度应该是多少	0
level	二维码的容错能力等级，取值为 ‘L’, ‘M’, ‘Q’, ‘H’ 之一	H
background	二维码背景颜色	#ffffff
foreground	二维码前景颜色	#000000
class	传递给二维码根元素的类名	’ ’

使用示例：

<qrcode-vue
    value="'https://www.baidu.com'"
    size="300"
  ></qrcode-vue>

由于我的项目是建立在手机端的，需要可以长按图片识别二维码或者保存二维码，经测试发现canvas类型的二维码手机无法识别，因此需要把图片转为base64格式的。
在这之前我还踩了点坑，安卓手机不能识别blob流的图片，如果在企微里面将无法长按识别二维码，而ios是可以的，因此根据该情况我测试发现base64的图片安卓或者苹果都可以长按识别。

因此核心就是将qrcode生成的canvas转为base64位的图片格式。
第一步：
在页面加载时就渲染出一个canvas格式的二维码，并且不显示；
第二步：
页面加载完成后，取出canvas元素，将其转为base64图片。
第三步：
将base64图片放入需要长按二维码的位置。

代码示例：

<qrcode-vue
    :value="'https://www.baidu.com'"
    v-show="showCanvas === true"
  ></qrcode-vue>

<van-image width="150" height="150" :src="imgData" />

const showCanvas = ref(false)
const imgData = ref('')

onMounted(() => {
  const canvas = document.getElementsByTagName('canvas')[0]
  console.log(canvas)
  imgData.value = canvas.toDataURL()
  showCanvas.value = false
})