qrcode方法生成的二维码安卓手机长按不识别

问题描述：

一个h5链接内用qrcode生成了二维码，在IOS系统长按可识别，在华Android长按没有反应，截图保存下来长按是可以识别的

问题产生原因：

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

解决方案:

手动将canvas隐藏，获取生成的链接拼到图片里面。

<!--用于存放canvas，隐藏--> <div id="QRCodeNone" style="width:54%;height:200px;margin:8% 0 8% 23%;display:none;" ></div> <!--用于存放二维码图片--> <div class="fir_code_m" id="qrcode" style="width:54%;height:200px;margin:8% 0 8% 23%;" ></div> ​ mounted() { //二维码 var elem = document.getElementById("QRCodeNone"); var qrc = document.getElementById("qrcode"); var urlq = globalConfig.pageUrl + "#/Enter/" + this.$route.params.sourceId + "/" + this.$route.params.infoId + "/" + this.cusId + "/" + this.cusupId + "/" + this.cusId; console.log(urlq); let qrcodeparams = { url: urlq, elem: elem }; utils.qrcode.makeQRCode(qrcodeparams); var myCanvas = document.getElementsByTagName("canvas")[0]; var img = this.convertCanvasToImage(myCanvas); qrc.append(img); }, methods: { //将canvas返回的图片添加到image里 convertCanvasToImage(canvas) { var image = new Image(); image.src = canvas.toDataURL("image/png"); return image; }, }