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 相关文章推荐
javascript自动生成包含数字与字符的随机字符串
Feb 09 Javascript
原生js制作简单的数字键盘
Apr 24 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
Nov 02 Javascript
AngularJS手动表单验证
Feb 01 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
May 07 Javascript
微信小程序 石头剪刀布实例代码
Jan 04 Javascript
使用ES6语法重构React代码详解
May 09 Javascript
微信小程序自定义波浪组件使用方法详解
Sep 21 Javascript
JS数组reduce()方法原理及使用技巧解析
Jul 14 Javascript
JS+css3实现幻灯片轮播图
Aug 14 Javascript
vue3.0 加载json的方法(非ajax)
Oct 26 Javascript
Vue使用Element实现增删改查+打包的步骤
Nov 25 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
php实现用手机关闭计算机(电脑)的方法
2015/04/22 PHP
JS实现self的resend
2010/07/22 Javascript
在JavaScript中监听IME键盘输入事件
2011/05/29 Javascript
javascript中字符串的定义示例代码
2013/12/19 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
2014/04/03 Javascript
JS中的Replace方法使用经验分享
2015/05/20 Javascript
使用impress.js制作幻灯片
2015/09/09 Javascript
JavaScript 动态三角函数实例详解
2017/01/08 Javascript
AngularJS前端页面操作之用户修改密码功能示例
2017/03/27 Javascript
一次围绕setTimeout的前端面试经验分享
2017/06/15 Javascript
利用node.js制作命令行工具方法教程(一)
2017/06/22 Javascript
vue-devtools的安装步骤
2018/04/23 Javascript
三步实现ionic3点击退出app程序
2019/09/17 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
2020/10/09 Javascript
javascript实现简单留言板案例
2021/02/09 Javascript
Python列表append和+的区别浅析
2015/02/02 Python
python修改操作系统时间的方法
2015/05/18 Python
python学习之第三方包安装方法(两种方法)
2015/07/30 Python
Python中标准模块importlib详解
2017/04/16 Python
python 实时得到cpu和内存的使用情况方法
2018/06/11 Python
深入浅析Python传值与传址
2018/07/10 Python
解决tensorflow训练时内存持续增加并占满的问题
2020/01/19 Python
使用tensorflow DataSet实现高效加载变长文本输入
2020/01/20 Python
python爬虫用mongodb的理由
2020/07/28 Python
Django url 路由匹配过程详解
2021/01/22 Python
比较基础的php面试题及答案-填空题
2014/04/26 面试题
业务副厂长岗位职责
2014/01/03 职场文书
问卷调查计划书
2014/01/10 职场文书
赞美老师的演讲稿
2014/05/22 职场文书
医院领导班子四风问题对照检查材料
2014/10/26 职场文书
2014年保卫部工作总结
2014/11/21 职场文书
个人简历求职信范文
2015/03/20 职场文书
2015年度公共机构节能工作总结
2015/05/26 职场文书
监守自盗观后感
2015/06/10 职场文书
美容院员工规章制度
2015/08/05 职场文书
php png失真的原因及解决办法
2021/11/17 PHP