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 相关文章推荐
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
Apr 12 Javascript
JS Replace 全部替换字符的用法小结
Dec 24 Javascript
jquery学习总结(超级详细)
Sep 04 Javascript
jQuery实现鼠标滑过点击事件音效试听
Aug 31 Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
Jun 21 Javascript
在web中js实现类似excel的表格控件
Sep 01 Javascript
详解React 16 中的异常处理
Jul 28 Javascript
vue组件间通信子与父详解(二)
Nov 07 Javascript
vue中使用echarts制作圆环图的实例代码
Jul 27 Javascript
微信小程序实现bindtap等事件传参
Apr 08 Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
Apr 26 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
Jul 28 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 应用程序的安全 -- 不能违反的四条安全规则
2006/11/26 PHP
php使用pdo连接报错Connection failed SQLSTATE的解决方法
2014/12/15 PHP
解决微信授权回调页面域名只能设置一个的问题
2016/12/11 PHP
JavaScript入门教程(8) Location地址对象
2009/01/31 Javascript
jquery win 7透明弹出层效果的简单代码
2013/08/06 Javascript
JavaScript中instanceof运算符的用法总结
2013/11/19 Javascript
js动态移动滚动条至底部示例代码
2014/04/24 Javascript
jQuery的css()方法用法实例
2014/12/24 Javascript
JavaScript通过join函数连接数组里所有元素的方法
2015/03/20 Javascript
在Node.js中使用HTTP上传文件的方法
2015/06/23 Javascript
轻松学习Javascript闭包函数
2015/12/15 Javascript
Document.body.scrollTop的值总为零的快速解决办法
2016/06/09 Javascript
jQuery-mobile事件监听与用法详解
2016/11/23 Javascript
浅谈jQuery中事情的动态绑定
2017/02/12 Javascript
zTree实现节点修改的实时刷新功能
2017/03/20 Javascript
Bootstrap 3浏览器兼容性问题及解决方案
2017/04/11 Javascript
Vue组件的使用教程详解
2018/01/05 Javascript
[01:19]2014DOTA2国际邀请赛 采访TITAN战队ohaiyo 能赢DK很幸运
2014/07/12 DOTA
在Python的Django框架的视图中使用Session的方法
2015/07/23 Python
python实现随机调用一个浏览器打开网页
2018/04/21 Python
Python实现的读取文件内容并写入其他文件操作示例
2019/04/09 Python
tensorflow 固定部分参数训练,只训练部分参数的实例
2020/01/20 Python
使用python自动追踪你的快递(物流推送邮箱)
2020/03/17 Python
html5声频audio和视频video等新特性详细说明
2012/12/26 HTML / CSS
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
2013/07/04 HTML / CSS
整理HTML5中支持的URL编码与字符编码
2016/02/23 HTML / CSS
香蕉共和国工厂店:Banana Republic Factory
2018/06/09 全球购物
澳大利亚设计的婴儿和女孩的衣服:Oobi
2018/12/16 全球购物
Oracle的内存结构(Memory structures)
2015/06/10 面试题
软件测试面试题
2015/10/21 面试题
小学教师自我鉴定
2013/11/07 职场文书
《一个小村庄的故事》教学反思
2014/04/13 职场文书
违章停车检讨书
2014/10/21 职场文书
海底两万里读书笔记
2015/06/26 职场文书
《猴王出世》教学反思
2016/02/23 职场文书
spring项目中切面及AOP的使用方法
2021/06/26 Java/Android