qrcodejs华为手机无法识别二维码解决方法

最新推荐文章于 2022-05-19 15:34:49 发布

原创

最新推荐文章于 2022-05-19 15:34:49 发布 · 6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

在项目中遇到华为手机无法通过长按识别qrcodejs生成的二维码，原因是canvas display:none在华为手机上不生效。解决方案是通过手动将canvas转为图片并隐藏原有二维码，确保在微信等环境中能正常识别。

前言

现在移动端都很普遍用到生成二维码，一般都是由前端生成，当然也有后台生成返图片给你。
比如生成海报，邀请二维码都有用到。我在项目中遇到的问题就是华为手机长按识别二维码会无法识别，原因大家应该也有搜百度，是应为qrcodejs生成二码后会把canvas display：none但是在华为手机不生效，微信不支持canvas长按识别，我解决的方法就是手动把canvas转图片，隐藏掉自带的那块。直接上代码。
项目用的是VUE，封装的Qrcode的组件

qrCode.vue
<template>
  <div class="qrcode_box">
    <div ref="code" v-if="!imgData"></div>
    <img class="toHtml" :src="imgData" alt v-else />
    <slot></slot>
  </div>
 
</template>
<script>
import QRCode from "qrcodejs2";
import html2canvas from "@/libs/html2canvas";
export default {
  name: "qrcode",
  props: ["text", "type", "color"],
  data() {
    return {
      imgData: ""
    };
  },
  watch: {
    text() {
      this.codeInit();
    },
    color() {
      this.codeInit();
    }
  },
  mounted() {
    this.codeInit();
  },
  methods: {
    codeInit() {
      if (!this.$refs.code) return;
      this.$refs.code.innerHTML = "";
      let w = this