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 相关文章推荐
模仿jQuery each函数的链式调用
Jul 22 Javascript
自定义的一个简单时尚js下拉选择框
Nov 20 Javascript
js中settimeout方法加参数
Feb 28 Javascript
使用Node.js实现HTTP 206内容分片的教程
Jun 23 Javascript
jquery-mobile表单的创建方法详解
Nov 23 Javascript
关于不同页面之间实现参数传递的几种方式讨论
Feb 13 Javascript
jQuery实现动态添加和删除input框代码实例
Mar 29 jQuery
微信小程序后端(java)开发流程的详细步骤
Nov 13 Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
Feb 16 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
Apr 16 Javascript
如何实现echarts markline标签名显示自己想要的
Jul 20 Javascript
Vue实现简易购物车页面
Dec 30 Vue.js
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
apache php模块整合操作指南
2012/11/16 PHP
PHP消息队列用法实例分析
2016/02/12 PHP
浅谈php中的访问修饰符private、protected、public的作用范围
2016/11/20 PHP
PHP连接MySQL数据库并以json格式输出
2018/05/21 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
脚本吧 - 幻宇工作室用到js,超强推荐share.js
2006/12/23 Javascript
Opacity.js
2007/01/22 Javascript
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
2012/06/18 Javascript
jquery实现列表上下移动功能
2016/02/25 Javascript
js实现加载更多功能实例
2016/10/27 Javascript
js常用的继承--组合式继承
2017/03/06 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
2017/09/13 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
2020/08/09 Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
2018/07/18 Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
2018/09/27 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
2018/11/08 Javascript
Python中用pycurl监控http响应时间脚本分享
2015/02/02 Python
深入讲解Python中的迭代器和生成器
2015/10/26 Python
python使用matplotlib绘制柱状图教程
2017/02/08 Python
python 监听salt job状态,并任务数据推送到redis中的方法
2019/01/14 Python
python实现通过队列完成进程间的多任务功能示例
2019/10/28 Python
全网最全python库selenium自动化使用详细教程
2021/01/12 Python
检测用户浏览器是否支持CSS3的方法
2009/08/29 HTML / CSS
澳大利亚旅游网站:Lastminute
2017/08/07 全球购物
施华洛世奇波兰官网:SWAROVSKI波兰
2019/06/18 全球购物
法国最大的在线眼镜店:EasyLunettes
2019/08/26 全球购物
如何开启linux的ssh服务
2015/02/14 面试题
人事部主管岗位职责
2013/12/26 职场文书
蓝颜请假条
2014/04/11 职场文书
交通事故赔偿协议书
2014/04/15 职场文书
运动会方阵口号
2014/06/07 职场文书
2014预备党员党课学习心得范文
2014/07/08 职场文书
2014年安全管理工作总结
2014/12/01 职场文书
2015年学校政教工作总结
2015/07/20 职场文书
vue实现移动端div拖动效果
2022/03/03 Vue.js
Ruby序列化和持久化存储 Marshal和Pstore介绍
2022/04/18 Ruby