使用qrcode遇到的坑坑坑

您有新的订单，请尽快查收😊😊😊
一个运营活动，给每一个登陆的用户生成一个专人的二维码，通过识别个人的二维码进入运营活动的，给予个人一定的奖励（发展下线），感觉像微商有木有；
我想：这么简单的需求，分分钟给你搞定，走起！！！

1.首先引入js

<script src="qrcode.min.js"></script>

2.接着写一个存放二维码的DOM

<div id="qrcode"></div>

3.再来定义二维码的样式

#qrcode{
  width:65px;
  height:65px;
}
#qrcode img{
  width:100%;
}

4.最后调用js生成二维码

function createQR(Url){
   $('#qrcode ').html('')//清空一下
    var qrcode = new QRCode('qrcode', {
              text: Url,
              width: 65,
              height: 65,
              typeNumber:-1,
              colorDark : '#000000',
              colorLight : '#ffffff',
              correctLevel : QRCode.CorrectLevel.H
      });  
  }

搞定，提交代码给测试，并信心满满的保证没问题；
结果杯具了！二维码不能识别不能扫描；好尴尬呀！有木有？？？😅😅😅

问题来了，咱就得解决呀，要不然领导分分钟灭了你；

百度，谷歌，知乎各种搜索，各种尝试，终于皇天不负「摆渡」人，集结各路人马（集思广益），来个最终版的问题解决方案;

问题1：安卓9版本以上不能识别二维码；

原因：由于qrcode很久没有维护了，对新的系统兼容不好，所以得自己维护下自己的qrcode版本；修改qrcode源码,github上的issues

解决办法：将qrcode兼容安卓新版本

aMat = b.toString().match(/android ([0-9].[0-9])/i);
//这句话改为
aMat = b.toString().match(/android (([0-9]).?[0-9]?)/i);//安卓系统是9的版本不是9.0版本，

问题2：兼容性问题-华为小米部分手机长按不能识别二维码，截图却能识别

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

解决办法：手动将canvas隐藏，获取生成的链接拼到图片里面

//html
<div id="codeDiv" style="display: none;"></div>
<div id="qrcode"> </div>
//js
function createQR(Url){
     var qrcode = new QRCode('codeDiv', {
              text: Url,
              width: 260,  //放大4倍
              height: 260, //放大4倍
              typeNumber:-1,
              colorDark : '#000000',
              colorLight : '#ffffff',
              correctLevel : QRCode.CorrectLevel.H
      });
      var canvas=document.getElementsByTagName('canvas')[0];
      var img = convertCanvasToImage(canvas);
      $('#qrcode').append(img);
 }
//从 canvas 提取图片 image  
function convertCanvasToImage(canvas) {  
    //新建Image对象
    var image = new Image();  
    // canvas.toDataURL 返回的是一串Base64编码的URL
    image.src = canvas.toDataURL("image/png");  
    return image;  
 }

问题3：生成的二维码模糊不清-上图将二维码放大4倍就是为了解决这个问题的；

问题4：在同一个页面点击不同的按钮有不同的链接地址需要生成，当生成第一个二维码，点击其他的按钮生成的二维码都是第一个二维码地址，没有改变；

原因：qrcode在页面生成二维码后，链接地址没有清空，后面一直都是用第一个链接地址生成二维码；

解决办法：清空链接地址，重新赋值，再次生成

  $('#qrcode').html('')//清空一下