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 相关文章推荐
jQuery1.5.1 animate方法源码阅读
Apr 05 Javascript
浅析js封装和作用域
Jul 09 Javascript
Javascript中的call()方法介绍
Mar 15 Javascript
jQuery ajax时间差导致的变量赋值问题分析
Jan 22 Javascript
深入分析Javascript事件代理
Jan 30 Javascript
JavaScript 函数的执行过程
May 09 Javascript
第八篇Bootstrap下拉菜单实例代码
Jun 21 Javascript
AngularJS指令用法详解
Nov 02 Javascript
简单理解js的冒泡排序
Dec 19 Javascript
微信小程序录音与播放录音功能
Dec 25 Javascript
JS正则表达式常见函数与用法小结
Apr 13 Javascript
JavaScript进阶(一)变量声明提升实例分析
May 09 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水印技术
2007/02/14 PHP
PHP Google的translate API代码
2008/12/10 PHP
php mssql 时间格式问题
2009/01/13 PHP
常用的javascript function代码
2008/05/23 Javascript
解javascript 混淆加密收藏
2009/01/16 Javascript
ExtJS 2.0实用简明教程 之Ext类库简介
2009/04/29 Javascript
js中的前绑定和后绑定详解
2013/08/01 Javascript
用javascript将数据导入Excel示例代码
2014/09/10 Javascript
js实现图片和链接文字同步切换特效的方法
2015/02/20 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
2015/04/06 Javascript
基于React.js实现原生js拖拽效果引发的思考
2016/03/30 Javascript
JavaScript中的继承之类继承
2016/05/01 Javascript
Require.JS中的几种define定义方式示例
2017/06/01 Javascript
Js中async/await的执行顺序详解
2017/09/22 Javascript
浅谈Koa服务限流方法实践
2017/10/23 Javascript
深入理解JavaScript和TypeScript中的class
2018/04/22 Javascript
vue2.0 中使用transition实现动画效果使用心得
2018/08/13 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
2019/09/21 Javascript
100行代码实现vue表单校验功能(小白自编)
2019/11/19 Javascript
jquery+ajax实现异步上传文件显示进度条
2020/08/17 jQuery
python实现12306抢票及自动邮件发送提醒付款功能
2018/03/08 Python
python ipset管理 增删白名单的方法
2019/01/14 Python
python实现读取类别频数数据画水平条形图案例
2020/04/24 Python
Python工程师必考的6个经典面试题
2020/06/28 Python
韩都衣舍天猫官方旗舰店:天猫女装销售总冠军
2017/10/10 全球购物
美国折衷生活方式品牌:Robert Graham
2018/07/13 全球购物
在印度上传处方,在线订购药品:Medlife
2019/03/28 全球购物
俄罗斯最大的灯具网站:Fandeco
2020/03/14 全球购物
销售副总经理岗位职责
2013/12/11 职场文书
2014全国两会大学生学习心得体会
2014/03/10 职场文书
公司年终奖分配方案
2014/06/16 职场文书
2014年数学教师工作总结
2014/12/03 职场文书
2015年计生协会工作总结
2015/04/24 职场文书
新员工试用期工作总结2015
2015/05/28 职场文书
Go遍历struct,map,slice的实现
2021/06/13 Golang
jQuery实现广告显示和隐藏动画
2021/07/04 jQuery