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

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

CrazBarry

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

阅读量5.4k

点赞数

分类专栏： vue-js 文章标签： vue

本文链接：https://blog.csdn.net/CrazBarry/article/details/108715845

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

现在移动端都很普遍用到生成二维码，一般都是由前端生成，当然也有后台生成返图片给你。
比如生成海报，邀请二维码都有用到。我在项目中遇到的问题就是华为手机长按识别二维码会无法识别，原因大家应该也有搜百度，是应为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() {