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 UI皮肤定制
Jul 27 Javascript
最短的javascript:地址栏载入脚本代码
Oct 13 Javascript
解决jquery插件冲突的问题
Jan 23 Javascript
JavaScript中for循环的使用详解
Jun 03 Javascript
jquery判断至少有一个checkbox被选中的方法
Jun 05 Javascript
javascript Slip.js实现整屏滑动的手机网页
Nov 25 Javascript
js实现仿qq消息的弹出窗效果
Jan 06 Javascript
javascript数组定义的几种方法
Oct 06 Javascript
js中apply和Math.max()函数的问题及区别介绍
Mar 27 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
vue.js添加一些触摸事件以及安装fastclick的实例
Aug 28 Javascript
JS实现滑动拼图验证功能完整示例
Mar 29 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
Bo-Blog专用的给Windows服务器的IIS Rewrite程序
2007/08/26 PHP
PHP读取XML值的代码(推荐)
2011/01/01 PHP
如何使用php判断服务器是否是HTTPS连接
2013/07/05 PHP
destoon二次开发模板及调用语法汇总
2014/06/21 PHP
10条php编程小技巧
2015/07/07 PHP
php 把数字转换成汉字的代码
2015/07/21 PHP
PHP基于cookie与session统计网站访问量并输出显示的方法
2016/01/15 PHP
基于PHP实现用户注册登录功能
2016/10/14 PHP
php数据结构之顺序链表与链式线性表示例
2018/01/22 PHP
如何确保JavaScript的执行顺序 之jQuery.html深度分析
2011/03/03 Javascript
LABjs、RequireJS、SeaJS的区别
2014/03/04 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
2014/04/14 Javascript
js中取得变量绝对值的方法
2015/01/03 Javascript
深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
2015/03/05 Javascript
JS字符串的切分用法实例
2016/02/22 Javascript
jquery点击切换背景色的简单实例
2016/08/25 Javascript
AngularJS ng-template寄宿方式用法分析
2016/11/07 Javascript
浅谈$_FILES数组为空的原因
2017/02/16 Javascript
webpack本地开发环境无法用IP访问的解决方法
2018/03/20 Javascript
layui 设置table 行的高度方法
2018/08/17 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
2018/09/10 Javascript
json前后端数据交互相关代码
2018/09/19 Javascript
vue实现购物车抛物线小球动画效果的方法详解
2019/02/13 Javascript
[00:35]TI7不朽珍藏III——寒冰飞龙不朽展示
2017/07/15 DOTA
Python基于numpy灵活定义神经网络结构的方法
2017/08/19 Python
PyQt5笔记之弹出窗口大全
2019/06/20 Python
树莓派使用python-librtmp实现rtmp推流h264的方法
2019/07/22 Python
Python绘制股票移动均线的实例
2019/08/24 Python
TensorFlow的reshape操作 tf.reshape的实现
2020/04/19 Python
python中什么是面向对象
2020/06/11 Python
Puritan’s Pride(普丽普莱)官方网站:美国最大最全的保健品公司之一
2016/10/23 全球购物
高二化学教学反思
2014/01/30 职场文书
超市国庆节促销方案
2014/02/20 职场文书
村庄环境整治方案
2014/05/15 职场文书
领导班子作风建设年个人整改措施
2014/09/29 职场文书
python tkinter Entry控件的焦点移动操作
2021/05/22 Python