QrcodeVue实现二维码生成和转化为图片

首先下载qrcode

npm install --save qrcode.vue

然后使用页面引入

import QrcodeVue from 'qrcode.vue'

HTML代码 :value是所生成二维码绑定的信息

 <qrcode-vue  id="qrcode"  ref="qrcodeContainer"  :value="qrCode123" size:700  ></qrcode-vue>

点击生成二维码 给绑定value的赋值

const openQR=()=>{
  let localData = JSON.parse(localStorage.getItem("data"));
  qrCode123.value=`https://h5.zrm.htcx666.com/#/home?userId=${localData.userInfo.id}`
}

以上就已经实现二维码的生成 接下来就是将二维码转化为可以下载保存的图片

let qrcode= document.getElementById("qrcode")//获取到页面的元素
  qrcodeImg.value= qrcode.toDataURL('image/png')
 //toDataURL()是HTML5 Canvas API中的一个方法，用于将canvas元素中的内容转换为一个Base64编码的DataURL字符串。

以下是toDataURL()的语法：

canvas.toDataURL(type, encoderOptions);
//可以使用 type 参数其类型，默认为 PNG 格式。图片的分辨率为96dpi
//type：图片格式，默认为 image/png,可以是其他image/jpeg等
//encoderOptions：0到1之间的取值，主要用来选定图片的质量，默认值是0.92，超出范围也会选择默认值。
//返回值是一个数据url，是base64组成的图片的源数据、可以直接赋值给图片的src属性