qrcodejs2生成二维码并下载到手机相册ios、android兼容性问题

最近在做一个后端返回地址生成二维码并手动保存到手机相册的功能，本以为很简单的需求没想到却意外翻车了，长按图片在安卓手机上居然不能保存，检查后没有报错也都执行了，同一段代码怎么运行不了了呢，反复验证后原来是qrcodejs2捣的鬼。结合移动端调试工具vconsole来找原因：

在ios下的表现（和chrome是一致的）:

screenshot_ios.png

来看android下的表现：

srceenshot_android.png

这次我们似乎发现了点什么，qrcodejs2在ios端生成二维码其实页面上会有两个元素，canvas和img标签，且canvas的属性是display: none而img则显示并生成了base64的编码路径，而在android端正好相反，img的属性是display: none而canvas则显示了。
由此我们大致明白了，只有生成了图片的机型下长按图片才会触发浏览器的下载行为，而canvas直接长按显然不行，所以我们为了以防万一可以去判断qrcodejs2生成的标签结构下是否存在属性不为display: none的img,如果有直接使用，否则就用canvas并将canvas转成一张图片。

 


initCode(url) {
    const c = {
      width: 220,
      height: 220,
      text: url, // 二维码地址
      colorDark: "#000",
      colorLight: "#fff",
    };
    console.log("c--", c);
    this.$nextTick(() => {
      const qrcode = new QRCode("qrcodeWrapper", c);
      setTimeout(() => {
        const img = this.$refs.qrcodeWrapper.querySelector("img");
        const canvas = document.getElementsByTagName("canvas")[0];
        if (canvas) {
          this.qrcodeHref = canvas.toDataURL("image/png");
        } else {
          this.qrcodeHref = img.src;
        }
       console.log("qrcodeHref--", this.qrcodeHref);
      }, 100);
    });
  }