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
})