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 相关文章推荐
PJ Blog修改-禁止复制的代码和方法
Oct 25 Javascript
js+csss实现的一个带复选框的下拉框
Sep 29 Javascript
js实现Select头像选择实时预览代码
Aug 17 Javascript
jQuery之简单的表单验证实例
Jul 07 Javascript
利用JavaScript判断浏览器类型及版本
Aug 23 Javascript
Javascript(es2016) import和require用法和区别详解
Aug 11 Javascript
修改UA在PC中访问只能在微信中打开的链接方法
Nov 27 Javascript
使用classList来实现两个按钮样式的切换方法
Jan 24 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
Oct 09 Javascript
vue router 源码概览案例分析
Oct 09 Javascript
vue实现按需加载组件及异步组件功能
May 27 Javascript
javascript中的this作用域详解
Jul 15 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取二进制文件头快速判断文件类型的实现代码
2013/08/05 PHP
php格式化金额函数分享
2015/02/02 PHP
php7安装mongoDB扩展的方法分析
2017/08/02 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
ThinkPHP5.1框架页面跳转及修改跳转页面模版示例
2019/05/06 PHP
js的闭包的一个示例说明
2008/11/18 Javascript
Jquery 表格合并的问题分享
2011/09/17 Javascript
详解jQuery插件开发中的extend方法
2013/11/19 Javascript
javascript放大镜效果的简单实现
2013/12/09 Javascript
jQuery模拟点击A标记示例参考
2014/04/17 Javascript
jQuery/CSS3图片特效插件整理推荐
2014/12/07 Javascript
javascript实现数独解法
2015/03/14 Javascript
jQuery实现的简洁下拉菜单导航效果代码
2015/08/26 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
2016/11/11 Javascript
深入学习 JavaScript中的函数调用
2017/03/23 Javascript
值得分享和收藏的xmlplus组件学习教程
2017/05/05 Javascript
浅谈JavaScript find 方法不支持IE的问题
2017/09/28 Javascript
vue awesome swiper异步加载数据出现的bug问题
2018/07/03 Javascript
微信小程序适配iphoneX的实现方法
2018/09/18 Javascript
使用electron制作满屏心特效的示例代码
2018/11/27 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
2019/04/11 Javascript
Vue 2.0 侦听器 watch属性代码详解
2019/06/19 Javascript
使用Phantomjs和Node完成网页的截屏快照的方法
2019/07/16 Javascript
详解Vue 项目中的几个实用组件(ts)
2019/10/29 Javascript
vue中的mescroll搜索运用及各种填坑处理
2019/10/30 Javascript
使用vue打包进行云服务器上传的问题
2020/03/02 Javascript
解决ant Design Search无法输入内容的问题
2020/10/29 Javascript
Python中统计函数运行耗时的方法
2015/05/05 Python
python Django批量导入不重复数据
2016/03/25 Python
Python面向对象类继承和组合实例分析
2018/05/28 Python
解决Python在导入文件时的FileNotFoundError问题
2020/04/10 Python
英国买鞋网站:Charles Clinkard
2019/11/14 全球购物
合伙经营协议书范本(通用版)
2014/12/03 职场文书
管辖权异议上诉状
2015/05/23 职场文书
vscode中使用npm安装babel的方法
2021/08/02 Javascript
Linux中各个目录的作用与内容
2022/06/28 Servers