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 相关文章推荐
Maps Javascript
Jan 22 Javascript
基于jquery的cookie的用法
Jan 10 Javascript
一个简单的瀑布流效果(主体形式自写)
May 27 Javascript
node.js中的fs.renameSync方法使用说明
Dec 16 Javascript
jquery实现动静态条形统计图
Aug 17 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
Aug 31 Javascript
js实现仿购物车加减效果
Mar 01 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
Mar 30 Javascript
angularJS自定义directive之带参方法传递详解
Oct 09 Javascript
Vue实现回到顶部和底部动画效果
Jul 31 Javascript
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
Sep 10 Javascript
vue实现简易音乐播放器
Aug 14 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
Win9x/ME下Apache+PHP安装配置
2006/10/09 PHP
php 中include()与require()的对比
2006/10/09 PHP
一个显示某段时间内每个月的方法 返回由这些月份组成的数组
2012/05/16 PHP
CodeIgniter框架常见用法工作总结
2017/03/16 PHP
jQuery 学习入门篇附实例代码
2010/03/16 Javascript
Jquery 表格合并的问题分享
2011/09/17 Javascript
js 获取、清空input type=&quot;file&quot;的值(示例代码)
2013/12/24 Javascript
jquery实现瀑布流效果分享
2014/03/26 Javascript
jQuery判断数组是否包含了指定的元素
2015/03/10 Javascript
Express+Nodejs 下的登录拦截实现代码
2017/07/01 NodeJs
浅谈JavaScript作用域和闭包
2017/09/18 Javascript
vue中使用cropperjs的方法
2018/03/01 Javascript
node上的redis调用优化示例详解
2018/10/30 Javascript
jQuery实现全选、反选和不选功能的方法详解
2019/12/04 jQuery
vue中使用elementUI组件手动上传图片功能
2019/12/13 Javascript
Python实现从订阅源下载图片的方法
2015/03/11 Python
Django中更新多个对象数据与删除对象的方法
2015/07/17 Python
对python创建及引用动态变量名的示例讲解
2018/11/10 Python
python 使用turtule绘制递归图形(螺旋、二叉树、谢尔宾斯基三角形)
2019/05/30 Python
pd.DataFrame统计各列数值多少的实例
2019/12/05 Python
jupyternotebook 撤销删除的操作方式
2020/04/17 Python
20行代码教你用python给证件照换底色的方法示例
2021/02/05 Python
HTML5之web workers_动力节点Java学院整理
2017/07/17 HTML / CSS
Surfdome西班牙:世界上最受欢迎的生活方式品牌
2019/02/13 全球购物
SQL Server面试题
2013/04/04 面试题
新领导上任欢迎词
2014/01/13 职场文书
网络研修随笔感言
2014/02/17 职场文书
社团活动总结
2014/04/28 职场文书
公务员政审材料范文
2014/12/23 职场文书
2015年社区党务工作总结
2015/04/21 职场文书
2015年音乐教研组工作总结
2015/07/22 职场文书
nginx网站服务如何配置防盗链(推荐)
2021/03/31 Servers
Nginx域名转发使用场景代码实例
2021/03/31 Servers
为Java项目添加Redis缓存的方法
2021/05/18 Redis
如何解决springcloud feign 首次调用100%失败的问题
2021/06/23 Java/Android
斗罗大陆八大特殊魂兽,龙族始祖排榜首,第五最残忍(翠魔鸟)
2022/03/18 国漫