qrcode生成二维码微信长按无法识别问题的解决

最近用QRCode.js 生成二维码之后，发现在小米和华为手机的微信上面页面长按识别不了，苹果和其他手机浏览器是正常的。qrcode在页面生成会生成一个canvas标签和一个img标签，在电脑浏览器上调试的时候发现生成二维码之后canvas标签是会自动隐藏的，然后展示img标签，然后通过vConsole 发现在小米或者华为手机上生成的二维码是通过canvas展示的，img标签被隐藏，而且img.src没有任何内容。怀疑是浏览器兼容问题。

jquery.qrcode.js 是一个纯浏览器 生成 QRcode 的 jQuery 插件（（可以从https://github.com/jeromeetienne/jquery-qrcode 获取）），它使用非常简单，生成的 QRcode 无需下载图片，并且不依赖第三方服务，插件压缩之后大小小于 4K。

QRCode.js 基本用法

引入JS库

 <script src="jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
 <script src="jquery.qrcode.min.js" type="text/javascript" charset="utf-8"></script>

html部分

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

js部分

// 设置要生成二维码的链接
new QRCode(document.getElementById("qrcode"), codeUrl);

或者

var qrcode = new QRCode("qrcode", {
 text: codeUrl,
 width: 128,
 height: 128,
 colorDark : "#000000",
 colorLight : "#ffffff",
 correctLevel : QRCode.CorrectLevel.H //容错级别
});

容错级别，可设置为：
QRCode.CorrectLevel.L
QRCode.CorrectLevel.M
QRCode.CorrectLevel.Q
QRCode.CorrectLevel.H

清除重新生成

qrcode.clear(); // clear the code.
qrcode.makeCode("http://naver.com"); // make another code.

浏览器支持

IE6~10, Chrome, Firefox, Safari, Opera, Mobile Safari, Android, Windows Mobile, ETC.

长按识别方式

解决思路是从canvas中提取图片base64自己生成图片

html部分

<div id="codeDiv" style="display: none;"></div>
<div id="qrcode"></div>

js部分

var qrcode = new QRCode("codeDiv", {
  text: codeUrl,
  render: "canvas", //渲染方式指定canvas方式
  width: 128,
  height: 128,
  typeNumber:-1,//计算模式
  colorDark : "#000000",
  colorLight : "#ffffff",
  correctLevel : QRCode.CorrectLevel.H
 });
 var canvas=document.getElementsByTagName('canvas')[0];
 var img = convertCanvasToImage(canvas);
 $('#qrcode').append(img);// 添加DOM
 //从 canvas 提取图片 image
 function convertCanvasToImage(canvas) {
  //新建Image对象
  var image = new Image();
  // canvas.toDataURL 返回的是一串Base64编码的URL
  image.src = canvas.toDataURL("image/png");
  return image;
 }

参考

QRCode.js 二维码生成并能够长按识别
GitHub

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • QRCode.js二维码生成并能长按识别

    QRCode.js 是一个用于生成二维码的 JavaScript 库.主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库. 首先引入QRCode.js文件,下载地址 如果生成二维码的信息是固定不变的,那么当然不需要如此这般,网上有好多现成的二维码生成器,直接用就好. 可是,我的需求是这样的,二维码用于在微信或QQ中分享,根据不同的用户信息分别生成不同的二维码,这样就不能偷懒,就得用代码生成了,并且生成的二维码支持长按识别进入. 话不多说,直接上干货: htm

  • qrcode生成二维码微信长按无法识别问题的解决

    最近用QRCode.js 生成二维码之后,发现在小米和华为手机的微信上面页面长按识别不了,苹果和其他手机浏览器是正常的.qrcode在页面生成会生成一个canvas标签和一个img标签,在电脑浏览器上调试的时候发现生成二维码之后canvas标签是会自动隐藏的,然后展示img标签,然后通过vConsole 发现在小米或者华为手机上生成的二维码是通过canvas展示的,img标签被隐藏,而且img.src没有任何内容.怀疑是浏览器兼容问题. jquery.qrcode.js 是一个纯浏览器 生成 Q

  • 使用jquery组件qrcode生成二维码及应用指南

    有一些耗cpu的计算,完全可以在客户端上计算,比如生成二维码. qrcode其实是通过计算,然后使用jquery实现图形渲染和画图.支持canvas和table两种方式生成我们所需的二维码. 具体用法 qrcode是jquery组件,需要至少两个js, 就是 jquery 和 jquery.qrcode.可以到https://github.com/jeromeetienne/jquery-qrcode获取最新的代码. 复制代码 代码如下: <script type="text/javasc

  • thinkphp3.2框架集成QRcode生成二维码的方法分析

    本文实例讲述了thinkphp3.2框架集成QRcode生成二维码的方法.分享给大家供大家参考,具体如下: 一.下载QRcode源代码 https://sourceforge.net/projects/phpqrcode/files/releases/ 使用phpqrcode必须开启GD2扩展,phpqrcode提供了一个png()方法,通过该方法,我们可以生成自已需要的二维码.该函数定义如下: public static function png( $text, $outfile = fals

  • jQuery qrcode生成二维码的方法

    现在二维码越来越流行,很多网页都会有个二维码,扫描后可通过手机浏览. 以前做类似的项目一般是在网页上生成图片,然后把图片插入到网页. 这样做不能每个页面都生成二维码. jquery-qrcode是一个能够在浏览器端生成二维码的jquery插件.它是独立的,最小压缩之后不足4k,也没有图片下载请求.引入该类库之后,只需要一行代码,就可以很容易在web页面加上二维码. qrcode其实是通过使用jQuery实现图形渲染,画图,支持canvas(HTML5)和table两种方式,可以到 https:/

  • 使用jquery插件qrcode生成二维码

    二维码应用已经渗透到我们的生活工作当中,您只需要用手机对着二维码"扫一扫"即可获得所对应的信息,方便我们了解商家.购物.观影等等.本文将介绍一款基于jquery的二维码生成插件qrcode,在页面中调用该插件就能生成对应的二维码. qrcode其实是通过使用jQuery实现图形渲染,画图,支持canvas(HTML5)和table两种方式,您可以到获取最新的代码. 如何使用 1.首先在页面中加入jquery库文件和qrcode插件. <script type="text

  • 使用jquery.qrcode.js生成二维码插件

    使用jquery.qrcode.js生成二维码插件

    二维码应用已经渗透到我们的生活工作当中,您只需要用手机对着二维码"扫一扫"即可获得所对应的信息,方便我们了解商家.购物.观影等等.本文将介绍一款基于jquery的二维码生成插件qrcode,在页面中调用该插件就能生成对应的二维码. 1.qrcode其实是通过使用jQuery实现图形渲染,画图,支持canvas(HTML5)和table两种方式, github源码地址:https://github.com/jeromeetienne/jquery-qrcode 参数说明: render 

  • 微信小程序将字符串生成二维码图片的操作方法

    最近接到这样一个需求,需要在小程序里将十几位随机字符串转换为二维码的形式展示.公众号中(另一终端)调用JSSDK扫一扫功能,去扫描小程序生成的二维码.得到字符串,然后进行接下来的逻辑处理. 下面记录的是小程序中生成二维码图片这一操作,用的是原文作者改版后的生成二维码工具weapp-qrcode.js(demo的众多文件中只需将util下的这个文件拷贝到自己项目中),可在原文地址里clone demo. 截图(copy原文) 使用 1.页面wxml中放置绘制二维码的canvas 加入点击改变二维码

  • VUE微信H5生成二维码海报保存在本地相册的实现

    VUE微信H5生成二维码海报保存在本地相册的实现

    目录 一.效果 二.说明 三.思路 四.效果 五.代码实现 六.遇到的问题 一.效果 二.说明 公司需求:宣传海报从后台获取,二维码地址也从后台获得,然后生成一个海报,海报上固定位置放二维码,长按图片可以保存在本地相册(其实前面的需求是点击按钮,下载海报图到本地相册,然后h5下载的实现原理是生成一个a标签链接,然后下载,在电脑模拟器可以下载,在微信浏览器一点反应没有,所以退一步,长按保存),下面是使用版本,UI插件用的是vant(有赞) vue:“^2.6.11”, “html2canvas”:

  • jquery插件qrcode在线生成二维码

    随着移动互联网的发展,二维码现在应用得越来越广泛了,随手扫扫就可以浏览网站.加个好友什么的,比起手工输入真的是方便太多了. 前期做了一个综合测评系统,考虑逐步实现移动化,一长串的IP地址用户输入也不方便,借助二维码的话,用户拿起手机扫扫就可以直接进入系统. 基于这个应用场景,就上网研究下了网站二维码的实现方式,归纳起来有以下两种: 1.借助一些二维码生成网站或者二维码生成器生成二维码图片,然后挂在网站上,如码云 QR-Code (二维码) 在线生成器 优点:开发成本为零,能够快速实现多样化的二维

随机推荐