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


Posted in Javascript onApril 04, 2019

最近用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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 序列化对象实现代码
Dec 18 Javascript
Javascript 八进制转义字符(8进制)
Apr 08 Javascript
JavaScript实现获取dom中class的方法
Feb 09 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
Sep 16 Javascript
js获取本机操作系统类型的两种方法
Dec 19 Javascript
原生JS实现图片轮播与淡入效果的简单实例
Aug 21 Javascript
在 Angular中 使用 Lodash 的方法
Feb 11 Javascript
解决vue attr取不到属性值的问题
Sep 18 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
Jun 10 Javascript
微信小程序实现渐入渐出动画效果
Jun 13 Javascript
如何在wxml中直接写js代码(wxs)
Nov 14 Javascript
浅谈JS的二进制家族
May 09 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 #jQuery
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
Apr 04 #Javascript
JS实现图片轮播效果实例详解【可自动和手动】
Apr 04 #Javascript
Vue传参一箩筐(页面、组件)
Apr 04 #Javascript
Vue使用.sync 实现父子组件的双向绑定数据问题
Apr 04 #Javascript
小程序getLocation需要在app.json中声明permission字段
Apr 04 #Javascript
Vue组件内部实现一个双向数据绑定的实例代码
Apr 04 #Javascript
You might like
解析php根据ip查询所在地区(非常有用,赶集网就用到)
2013/07/01 PHP
ThinkPHP中Common/common.php文件常用函数功能分析
2016/05/20 PHP
在VS2008中使用jQuery智能感应的方法
2010/12/30 Javascript
基于jquery的blockui插件显示弹出层
2011/04/14 Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
2014/11/02 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
2015/06/19 Javascript
jquery实现手机号码选号的方法
2015/07/31 Javascript
基于Javascript实现返回顶部按钮
2016/02/29 Javascript
Angularjs过滤器使用详解
2016/05/25 Javascript
jquery之别踩白块游戏的简单实现
2016/07/25 Javascript
浅谈AngularJs指令之scope属性详解
2016/10/24 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
2017/01/20 Javascript
Nodejs+angularjs结合multiparty实现多图片上传的示例代码
2017/09/29 NodeJs
在Vue项目中引入腾讯验证码服务的教程
2018/04/03 Javascript
解决vue中虚拟dom,无法实时更新的问题
2018/09/15 Javascript
vue组件中的样式属性scoped实例详解
2018/10/30 Javascript
一次让你了解全部JavaScript的作用域
2019/06/24 Javascript
vue下使用nginx刷新页面404的问题解决
2019/08/02 Javascript
详解Vue中的MVVM原理和实现方法
2020/07/15 Javascript
Linux环境下MySQL-python安装过程分享
2015/02/02 Python
python中根据字符串调用函数的实现方法
2016/06/12 Python
wxpython中自定义事件的实现与使用方法分析
2016/07/21 Python
python实现飞机大战小游戏
2019/11/08 Python
使用Python函数进行模块化的实现
2019/11/15 Python
Python安装依赖(包)模块方法详解
2020/02/14 Python
10个顶级Python实用库推荐
2021/03/04 Python
CSS3 分类菜单效果
2019/05/27 HTML / CSS
shell程序中如何注释
2012/01/28 面试题
物业经理自我鉴定
2014/03/03 职场文书
预备党员表决心书
2014/03/11 职场文书
经理岗位职责范本
2015/04/15 职场文书
评奖评优个人先进事迹材料
2015/11/04 职场文书
电力培训学习心得体会
2016/01/11 职场文书
Python中的np.argmin()和np.argmax()函数用法
2021/06/02 Python
Pandas数据结构之Series的使用
2022/03/31 Python
python如何为list实现find方法
2022/05/30 Python