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实现的定时显示与隐藏div广告的实现代码
Aug 22 Javascript
js实现遮罩层划出效果是生成div而不是显示
Jul 29 Javascript
Bootstrap树形组件jqTree的简单封装
Jan 25 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
Sep 02 Javascript
解析预加载显示图片艺术
Dec 05 Javascript
JQuery异步提交表单与文件上传功能示例
Jan 12 Javascript
Mongoose学习全面理解(推荐)
Jan 21 Javascript
Ionic2调用本地SQlite实例
Apr 22 Javascript
Vue常见面试题整理【值得收藏】
Sep 20 Javascript
Vue 表情包输入组件的实现代码
Jan 21 Javascript
js的新生代垃圾回收知识点总结
Aug 22 Javascript
JavaScript JSON使用原理及注意事项
Jul 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实现动态柱状图改进版
2015/03/30 PHP
php如何控制用户对图片的访问 PHP禁止图片盗链
2016/03/25 PHP
eclipse php wamp配置教程
2016/06/30 PHP
PHP命名空间namespace用法实例分析
2016/09/27 PHP
PHP数组式访问接口ArrayAccess用法分析
2017/12/28 PHP
laravel 实现根据字段不同值做不同查询
2019/10/23 PHP
prototype1.4中文手册
2006/09/22 Javascript
fromCharCode和charCodeAt 方法
2006/12/27 Javascript
js jq 单击和双击区分示例介绍
2013/11/05 Javascript
js实现单行文本向上滚动效果实例代码
2013/11/28 Javascript
js 动态为textbox添加下拉框数据源的方法
2014/04/24 Javascript
TypeError document.getElementById(...) is null错误原因
2015/05/18 Javascript
javascript实现动态统计图开发实例
2015/11/21 Javascript
JavaScript实现复制文章自动添加版权
2016/08/02 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
2016/09/02 Javascript
微信公众号 客服接口的开发实例详解
2016/09/28 Javascript
JavaScript实现星级评价效果
2019/05/17 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
2019/07/19 Javascript
NodeJS实现一个聊天室功能
2019/11/25 NodeJs
Vue左滑组件slider使用详解
2020/08/21 Javascript
[12:36]《DOTA2》国服注册与激活指南全攻略
2013/04/28 DOTA
[51:11]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS DT
2014/05/22 DOTA
python实现指定字符串补全空格的方法
2015/04/30 Python
python对url格式解析的方法
2015/05/13 Python
python中numpy基础学习及进行数组和矢量计算
2017/02/12 Python
python 解决flask uwsgi 获取不到全局变量的问题
2019/12/22 Python
Python并发爬虫常用实现方法解析
2020/11/19 Python
python基于Kivy写一个图形桌面时钟程序
2021/01/28 Python
纯CSS3实现地球自转实现代码(图文教程附送源码)
2012/12/26 HTML / CSS
美国男士内衣品牌:Tommy John
2017/12/22 全球购物
开普敦通行证:Cape Town Pass
2019/07/18 全球购物
2014年医学生毕业自我鉴定
2014/03/26 职场文书
大学开学计划书
2014/04/30 职场文书
技术股东合作协议书
2014/12/02 职场文书
海康机器人重磅发布全新算法开发平台VM4.2
2022/04/21 数码科技
Golang实现可重入锁的示例代码
2022/05/25 Golang