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 相关文章推荐
jquery实现的随机多彩tag标签随机颜色和字号大小效果
Mar 27 Javascript
用js一次改变多个input的readonly属性值的方法
Jun 11 Javascript
javascript正则表达式中的replace方法详解
Apr 20 Javascript
Javascript实现鼠标右键特色菜单
Aug 04 Javascript
深入理解JS DOM事件机制
Aug 06 Javascript
关于vue.js v-bind 的一些理解和思考
Jun 06 Javascript
Vue cli+mui 区域滚动的实例代码
Jan 25 Javascript
vue2.0 axios跨域并渲染的问题解决方法
Mar 08 Javascript
通过npm或yarn自动生成vue组件的方法示例
Feb 12 Javascript
ionic4+angular7+cordova上传图片功能的实例代码
Jun 19 Javascript
Vue.js watch监视属性知识点总结
Nov 11 Javascript
微信小程序商品详情页底部弹出框
Nov 22 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
Ajax PHP 边学边练 之三 数据库
2009/11/26 PHP
PHP简洁函数(PHP简单明了函数语法)
2012/06/10 PHP
PHP中preg_match函数正则匹配的字符串长度问题
2015/05/27 PHP
Laravel 默认邮箱登录改成用户名登录的实现方法
2019/08/12 PHP
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
2009/06/14 Javascript
下拉列表select 由左边框移动到右边示例
2013/12/04 Javascript
js实现弹窗插件功能实例代码分享
2013/12/12 Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
2014/01/09 Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
2014/02/12 Javascript
让table变成exls的示例代码
2014/03/24 Javascript
jQuery on方法传递参数示例
2014/12/09 Javascript
JavaScript小技巧整理
2015/12/30 Javascript
对js eval()函数的一些见解
2016/08/15 Javascript
JS简单设置下拉选择框默认值的方法
2016/08/20 Javascript
购物车前端开发(jQuery和bootstrap3)
2016/08/27 Javascript
JavaScript实现无刷新上传预览图片功能
2017/08/02 Javascript
Nodejs+angularjs结合multiparty实现多图片上传的示例代码
2017/09/29 NodeJs
Vue2仿淘宝实现省市区三级联动
2020/04/15 Javascript
小程序获取周围IBeacon设备的方法
2018/10/31 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
2019/03/14 Javascript
jQuery轮播图功能制作方法详解
2019/12/03 jQuery
vue大型项目之分模块运行/打包的实现
2020/09/21 Javascript
Python基于twisted实现简单的web服务器
2014/09/29 Python
Python contextlib模块使用示例
2015/02/18 Python
编写Python脚本批量下载DesktopNexus壁纸的教程
2015/05/06 Python
Python学习之用pygal画世界地图实例
2017/12/07 Python
让Python更加充分的使用Sqlite3
2017/12/11 Python
wxPython绘图模块wxPyPlot实现数据可视化
2019/11/19 Python
Pytorch通过保存为ONNX模型转TensorRT5的实现
2020/05/25 Python
Python 调用 ES、Solr、Phoenix的示例代码
2020/11/23 Python
一套带网友答案的.NET笔试题
2016/12/06 面试题
商业项目策划方案
2014/06/05 职场文书
2014年度安全生产目标管理责任书
2014/07/25 职场文书
2014乡党委副书记党建工作汇报材料
2014/11/02 职场文书
2014年幼儿园工作总结
2014/11/10 职场文书
Go 语言中 20 个占位符的整理
2021/10/16 Golang