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 相关文章推荐
在textarea文本域中显示HTML代码的方法
Mar 06 Javascript
node.js中的fs.readlinkSync方法使用说明
Dec 17 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
Jul 04 Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
Sep 19 Javascript
微信小程序 获取设备信息 API实例详解
Oct 02 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
Dec 27 Javascript
Vue 中使用 CSS Modules优雅方法
Apr 09 Javascript
layui的table单击行勾选checkbox功能方法
Aug 14 Javascript
js实现前面自动补全位数的方法
Oct 10 Javascript
微信小程序实现星级评价效果
Dec 28 Javascript
使用layui的router来进行传参的实现方法
Sep 06 Javascript
vue浏览器返回监听的具体步骤
Feb 03 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
咖啡风味 世界咖啡主要分布分布 咖啡的生长要求
2021/03/06 新手入门
php使浏览器直接下载pdf文件的方法
2013/11/15 PHP
Yii2语言国际化自动配置详解
2018/08/22 PHP
PHP使用phpunit进行单元测试示例
2019/09/23 PHP
广告显示判断
2006/08/31 Javascript
js操纵dom生成下拉列表框的方法
2014/02/24 Javascript
Jquery弹出层插件ThickBox的使用方法
2014/12/09 Javascript
JavaScript将XML转成JSON的方法
2015/03/12 Javascript
javascript与jquery动态创建html元素示例
2016/07/25 Javascript
jquery replace方法去空格
2017/05/08 jQuery
Echarts基本用法_动力节点Java学院整理
2017/08/11 Javascript
深入理解ES7的async/await的用法
2017/09/09 Javascript
react-native封装插件swiper的使用方法
2018/03/20 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
2019/05/06 Javascript
微信小程序 授权登录详解(附完整源码)
2019/08/23 Javascript
[46:55]完美世界DOTA2联赛决赛 FTD vs Phoenix 第三场 11.08
2020/11/11 DOTA
Django实现图片文字同时提交的方法
2015/05/26 Python
python处理xml文件的方法小结
2017/05/02 Python
python写入并获取剪切板内容的实例
2018/05/31 Python
django框架基于模板 生成 excel(xls) 文件操作示例
2019/06/19 Python
python3在同一行内输入n个数并用列表保存的例子
2019/07/20 Python
简单易懂Pytorch实战实例VGG深度网络
2019/08/27 Python
Python 实现文件读写、坐标寻址、查找替换功能
2019/09/11 Python
pytest中文文档之编写断言
2019/09/12 Python
Python+Selenium随机生成手机验证码并检查页面上是否弹出重复手机号码提示框
2020/09/21 Python
html5视频播放_动力节点Java学院整理
2017/07/13 HTML / CSS
法国滑雪假期的专家:Ski Planet
2019/11/02 全球购物
英国家具、照明、家居用品网上商店:Wayfair.co.uk
2020/02/13 全球购物
学生个人求职自荐信格式
2013/09/23 职场文书
节能环保标语
2014/06/12 职场文书
大学毕业生个人自荐书
2014/07/02 职场文书
工伤事故处理协议书怎么写
2014/10/15 职场文书
党的群众路线教育实践活动个人对照检查材料(四风)
2014/11/05 职场文书
医院员工辞职信范文
2015/05/12 职场文书
2015暑期爱心支教策划书
2015/07/14 职场文书
高中生军训感言
2015/08/01 职场文书