vue生成二维码的插件以及华为手机长按不保存的问题

介绍二个比较简单的生成二维码的插件
1.QRcode 2.vue-qr
其实这俩款插件 唯一的区别的就是
vue-qr可以在二维码中间加一个log

QRcode(使用过)

安装:(yarn/npm)
yarn add qrcodejs2
npm install qrcodejs2

在需要的组件内引用

import QRCode from 'qrcodejs2'

	<div class="qrcode" ref="qrCodeUrl"></div>
<script>
	methods: {
creatQrCode() {
  var qrcode = new QRCode(this.$refs.qrCodeUrl, {
      text: 'http://baidu.com', //扫码就跳转到百度页面
      width: 100,
      height: 100,
      colorDark: '#000000',
      colorLight: '#ffffff',
      correctLevel: QRCode.CorrectLevel.H
 })
},
}
mounted() {
       this.creatQrCode();
    },
</script>

QRCode对象有俩个参数
new QRCode(element, option)
第1个 生成的二维码要放到的节点 第2个 二维码样式的描述
QRCode的属性

名称	说明
text	可以是链接,可以是内容,生成二维码的内容
width	二维码的宽度
colorDark	前景色
colorLight	背景色
correctLevel	容错率默认QRCode.CorrectLevel.L

容错率通俗一点就是,二维码被遮住一部分可以通过智能识别出来,
L 7%
M 15%
Q 25%
H 30%

Api

名称	说明
makeCode(text)	设置二维码的内容
clear()	清除二维码

注意点
1.在实际项目中,如果text 字段特别多,生成的二维码会特别复杂,
手机在识别的时候可以识别不出来,需要增加二维码的宽高,
或者减少字段,
2.一定要在mounted(){} 中调用,
想知道为什么去看看vue生命周期理解一下吧
只有不断探讨才可以进步,加油吧

Vue-qr (没有用过)

<vue-qr :logoSrc="imageUrl" text="xxx" :size="200"></vue-qr>
<script>
  import vueQr from 'vue-qr'
  export default {
    name: "qecode",
    data() {
      return {
      //img的引入必须用require
        imageUrl: require("../assets/logo.png"),
      }
    },
    components: {
      vueQr
    },
    },
  }
</script>

使用Qrcode遇到的问题描述:

 qrcode生成的二维码，在苹果等手机上长按可识别，在华为手机上长按没有反应.

问题原因

浏览器兼容问题

qrcode在页面生成二维码时，会生成一个canvas标签和一个img标签。在电脑浏览器上调试的时候，发现生成二维码之后canvas标签是会自动隐藏的，然后展示img标签，我们看到和识别的其实是图片。但是在华为手机上生成的canvas是不会隐藏的，我们看到的是canvas，所以无法识别

解决办法

手动隐藏canvas,获取图片链接,用toDataURL转换成图片的src链接,放到一个新的div里面

html:

//隐藏canvas
<div id="qrcode" ref="qrCodeUrl" style="display:none;"></div>
	//显示图片的地方
   <div id="qrcode1">
      <img :src="this.qrcodeImgSrc" alt="qrcode-img">
      //this.qrcodeImgSrc 自定义的字段
   </div>

js:

...生成二维码的步骤就过了,都是在一个方法里写
let myCanvas = document.getElementById('qrcode').getElementsByTagName('canvas')[0];
this.qrcodeImgSrc = myCanvas.toDataURL('image/png')

toDataURL语法

canvas.toDataURL(type, encoderOptions);
返回一个包含图片展示的 data URI
参数
type 可选
图片格式，默认为image/png
encoderOptions 可选
图片质量。取值范围为0到1。如果指定图片格式为image/jpeg或image/webp。如果超出取值范围，将会使用默认值0.92。其他参数会被忽略。

返回值
包含dataURI的DOMString。
DataURI格式：data:[][;base64],。其中mediatype声明了文件类型，遵循MIME规则，如“image/png”、“text/plain”；之后是编码类型，这里我们只涉及 base64；紧接着就是文件编码后的内容了。