jQuery实现微信长按识别二维码功能


Posted in Javascript onAugust 26, 2016

最近一直在搞一个微信开发的项目,终于快要完工了,今天小编抽个时间记录下在项目开发过程中遇到jquery.qrcode.min.js生成二维码长按不识别的解决方法,希望对大家有所帮助!

1.引入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>

2.在页面创建一个空的div;

<div id="qrDiv"></div>

3.生成二维码

$("#qrDiv").qrcode({ 
width: 120, //宽度 
height:120, //高度 
text: "需要生成的二维码内容" //任意内容 
});

注意:这个时候生成的二维码在微信中长安没任何反应,因为qrcode生成的是canvas标签而不是img标签

4.将canvas标签转换为img标签

//从 canvas 提取图片 image 
function convertCanvasToImage(canvas) { 
//新Image对象,可以理解为DOM 
var image = new Image(); 
// canvas.toDataURL 返回的是一串Base64编码的URL,当然,浏览器自己肯定支持 
// 指定格式 PNG 
image.src = canvas.toDataURL("image/png"); 
return image; 
} 
//获取网页中的canvas对象 
var mycanvas1=document.getElementsByTagName('canvas')[0]; 
//将转换后的img标签插入到html中 
var img=convertCanvasToImage(mycanvas1); 
$('#imagQrDiv').append(img);//imagQrDiv表示你要插入的容器id

注意:完成上述步骤后就可以在微信中长按识别了

以上所述是小编给大家介绍的jQuery实现微信长按识别二维码功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
html数组字符串拼接的最快方法
Sep 16 Javascript
TextArea 控件的最大长度问题(js json)
Dec 16 Javascript
javascript与webservice的通信实现代码
Dec 25 Javascript
关于jQuery的inArray 方法介绍
Oct 08 Javascript
javascript针对DOM的应用分析(二)
Apr 15 Javascript
jQuery.clean使用方法及思路分析
Jan 07 Javascript
ie8本地图片上传预览示例代码
Jan 12 Javascript
JavaScript易错知识点整理
Dec 05 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
Jun 03 Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
Feb 02 Javascript
vue组件之间通信方式实例总结【8种方式】
Feb 22 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
May 30 Javascript
XMLHttpRequest Level 2 使用指南
Aug 26 #Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
Aug 26 #Javascript
JavaScript组合模式学习要点
Aug 26 #Javascript
前端面试题及答案整理(二)
Aug 26 #Javascript
js前端面试题及答案整理(一)
Aug 26 #Javascript
JavaScript中ES6字符串扩展方法
Aug 26 #Javascript
总结十个Angular.js由浅入深的面试问题
Aug 26 #Javascript
You might like
php学习之 循环结构实现代码
2011/06/09 PHP
CodeIgniter错误mysql_connect(): No such file or directory解决方法
2014/09/06 PHP
PHP中使用Imagick读取pdf并生成png缩略图实例
2015/01/21 PHP
php禁用函数设置及查看方法详解
2016/07/25 PHP
php实现的后台表格分页功能示例
2017/10/23 PHP
php7 错误处理机制修改实例分析
2020/05/25 PHP
jquery中交替点击事件toggle方法的使用示例
2013/12/08 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
jQuery控制网页打印指定区域的方法
2015/04/07 Javascript
AngularJS基础 ng-href 指令用法
2016/08/01 Javascript
用node和express连接mysql实现登录注册的实现代码
2017/07/05 Javascript
基于对象合并功能的实现示例
2017/10/10 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
2018/09/15 Javascript
Nuxt.js之自动路由原理的实现方法
2018/11/21 Javascript
基于vue实现移动端圆形旋钮插件效果
2018/11/28 Javascript
Bootstrap4 gulp 配置详解
2019/01/06 Javascript
详解js根据百度地图提供经纬度计算两点距离
2019/05/13 Javascript
Openlayers绘制地图标注
2020/09/28 Javascript
[07:52]2014DOTA2 TI逗比武士游V社解说背后的故事
2014/07/10 DOTA
[04:50]DOTA2亚洲邀请赛小组赛第四日 TOP10精彩集锦
2015/02/02 DOTA
Python实现简单状态框架的方法
2015/03/19 Python
Python函数定义及传参方式详解(4种)
2019/03/18 Python
python批量爬取下载抖音视频
2019/06/17 Python
python多进程并发demo实例解析
2019/12/13 Python
python使用matplotlib绘制折线图的示例代码
2020/09/22 Python
Python SQLAlchemy库的使用方法
2020/10/13 Python
localStorage的过期时间设置的方法详解
2018/11/26 HTML / CSS
台湾流行服饰购物平台:OB严选
2018/01/21 全球购物
家庭困难证明
2014/10/12 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
党校个人总结
2015/03/04 职场文书
销售区域经理岗位职责
2015/04/10 职场文书
会计专业2019暑假实习报告
2019/06/21 职场文书
python3实现常见的排序算法(示例代码)
2021/07/04 Python
Win11软件图标固定到任务栏
2022/04/19 数码科技
Spring Boot接口定义和全局异常统一处理
2022/04/20 Java/Android