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 相关文章推荐
js实现图片放大缩小功能后进行复杂排序的方法
Nov 08 Javascript
AngularJS数据源的多种获取方式汇总
Feb 02 Javascript
详解Node.js如何开发命令行工具
Aug 14 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
Jun 19 Javascript
详解webpack 多页面/入口支持&amp;公共组件单独打包
Jun 29 Javascript
微信小程序之选项卡的实现方法
Sep 29 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
May 04 Javascript
VUE基于NUXT的SSR 服务端渲染
Nov 30 Javascript
使用Angular Cli如何创建Angular私有库详解
Jan 30 Javascript
如何为你的JS项目添加智能提示与类型检查详解
Mar 12 Javascript
javascript中的this作用域详解
Jul 15 Javascript
Vue实现兄弟组件间的联动效果
Jan 21 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
excellent!――ASCII Art(由目标图象生成ascii)
2007/02/20 PHP
PHP实现补齐关闭的HTML标签
2016/03/22 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
javascript js cookie的存储,获取和删除
2007/12/29 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
2014/11/02 Javascript
javascript实现页面刷新时自动清空表单并选中的方法
2015/07/18 Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
2015/12/02 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
2016/05/10 Javascript
Jquery获取当前城市的天气信息
2016/08/05 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
2016/09/05 Javascript
jsTree使用记录实例
2016/12/01 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
2017/10/26 Javascript
修改vue+webpack run build的路径方法
2018/09/01 Javascript
使用Sonarqube扫描Javascript代码的示例
2018/12/26 Javascript
vue操作动画的记录animate.css实例代码
2019/04/26 Javascript
使用express来代理服务的方法
2019/06/21 Javascript
javascript设计模式之迭代器模式
2020/01/30 Javascript
es6数组的flat(),flatMap()函数用法实例分析
2020/04/18 Javascript
ES6对象操作实例详解
2020/05/23 Javascript
对vuex中store和$store的区别说明
2020/07/24 Javascript
windows系统下Python环境的搭建(Aptana Studio)
2017/03/06 Python
python 重定向获取真实url的方法
2018/05/11 Python
python中import与from方法总结(推荐)
2019/03/21 Python
python 进程 进程池 进程间通信实现解析
2019/08/23 Python
你还在@微信官方?聊聊Python生成你想要的微信头像
2019/09/25 Python
python matplotlib工具栏源码探析二之添加、删除内置工具项的案例
2021/02/25 Python
html5 canvas的绘制文本自动换行的示例代码
2018/09/17 HTML / CSS
小学教师自我鉴定
2013/11/07 职场文书
经管应届生求职信
2013/11/17 职场文书
工地资料员岗位职责
2013/12/31 职场文书
大学生简短的自我评价分享
2014/02/20 职场文书
有限公司股东合作协议书
2014/10/29 职场文书
幼儿园小班个人总结
2015/02/12 职场文书
酒店优秀员工推荐信
2015/03/24 职场文书
《成长的天空》读后感3篇
2019/12/06 职场文书
Python Pandas pandas.read_sql函数实例用法
2021/06/21 Python