jquery生成二维码图片
1.插件介绍
jquery.qrcode.min.js插件是jq系列的基于jq,在引入该插件之前要先引入jq。能够在客户端生成矩阵二维码QRCode 的jquery插件 ,使用它可以很方便的在页面上生成二维条码。
闲话少说,看demo吧!(haha...)
2.快速使用demo
简单介绍:这是一款快速应用案例,没有太特殊的需求的话够用了。鉴于需求,本例是把二维码生成了图片,可以保存到手机,然后发送给好友,直接识别二维码。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>二维码分享xx</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 7 <link rel="stylesheet" type="text/css" href="jquery.mobile-1.4.5.min.css" /> 8 <script src="jquery-1.8.3.min.js"></script> 9 <script src="jquery.mobile-1.4.5.min.js"></script> 10 <script src="jquery.qrcode.min.js"></script> 11 <style> 12 * {13 font-family: "微软雅黑"; 14 } 15 #wxshare {16 font-weight: normal; 17 background: #3d85c6; 18 border-radius: 5px; 19 padding: 5px 7px; 20 color: #fff; 21 border: none; 22 } 23 .tc {24 text-align: center; 25 } 26 27 .block {28 display: block; 29 } 30 .green {31 color: #2d7104; 32 } 33 #myPopup small {34 padding: 8px; 35 border-bottom: 1px solid #ccc; 36 } 37 #qrcodeImg {38 margin-top: 20px; 39 padding: 3px; 40 border: 1px solid #ccc; 41 } 42 </style> 43 </head> 44 <body> 45 <div data-role="page"> 46 <div data-role="header" data-theme="b"> 47 <h1>七月</h1> 48 </div> 49 <div data-role="main" class="ui-content"> 50 <a id='wxshare' data-rel="popup" href="#myPopup" class="ui-btn ui-corner-all" data-transition="slidedown"><span>邀请好友</span></a> 51 <!--弹窗--> 52 <div data-role="popup" id="myPopup" data-position-to="window" class="ui-content"> 53 <div class='tc'> 54 <small class="green">长按一下二维码保存图片发送给好友</small> 55 56 <div id="code"></div> 57 <img src="" id="qrcodeImg"/><br> 58 </div> 59 </div> 60 </div> 61 </div> 62 63 <script> 64 $(function() { 65 $('#wxshare').tap(function() { 66 var qrcode = $('#code').qrcode({ 67 render: "canvas", //也可以替换为table 68 width: 120, 69 height: 120, 70 text: "http://www.cnblogs.com/imelemon"/*可以通过ajax请求动态设置*/ 71 72 }).hide(); 73 //将生成的二维码转换成图片格式 74 var canvas = qrcode.find('canvas').get(0); 75 $('#qrcodeImg').attr('src', canvas.toDataURL('image/jpg')); 76 }); 77 78 }); 79 </script> 80 81 </body> 82 83 </html>
demo运行效果简略如下:有兴趣可以自己尝试一下
3.用法分析
(1)将jquery.qrcode.min.js和jquery添加到您的网页中
1 <script src="jquery-1.8.3.min.js"></script> 2 <script type="text/javascript" src="jquery.qrcode.min.js"></script>
注意:2中demo引入jqueryMobile是为了样式和交互效果加的。基本引入这两个就可以使用了! (2)然后要创建一个二维码的容器:
<div id="code"></div>
(3)加入js在容器中创建二维码:
<script>$(function() {$('#wxshare').tap(function() {var qrcode = $('#code').qrcode({render: "canvas", //也可以替换为tablewidth: 120,height: 120,text: "http://www.cnblogs.com/imelemon/p/6677956.html"/*可以通过ajax请求动态设置*/}).hide();//将生成的二维码转换成图片格式var canvas = qrcode.find('canvas').get(0);$('#qrcodeImg').attr('src', canvas.toDataURL('image/jpg'));});});</script>
4.进阶用法
(1)设置二维码大小
//生成100*100(宽度100,高度100)的二维码jQuery('#qrcode').qrcode({render : "canvas",//也可以替换为tablewidth : 100,//单位是像素height : 100,text : "http://www.cnblogs.com/imelemon/p/6677956.html"});
(2)设置二维码颜色
//生成前景色为红色背景色为白色的二维码jQuery('#qrcode').qrcode({ render : "canvas",//也可以替换为tableforeground: "#C00", background: "#FFF", text : "http://www.cnblogs.com/imelemon/p/6677956.html" 7 });
(3)设置二维码生成方式
//使用table/canvas生成jQuery('#qrcode').qrcode({render : "table",//使用canvas生成就设置为 canvastext : "http://www.cnblogs.com/imelemon/p/6677956.html" });
(3)将二维码转成图片格式:
->如2中demo
$('#wxshare').tap(function() {var qrcode = $('#code').qrcode({render: "canvas", //也可以替换为tablewidth: 120,height: 120,text: "http://www.cnblogs.com/imelemon"/*可以通过ajax请求动态设置*/}).hide();//将生成的二维码转换成图片格式var canvas = qrcode.find('canvas').get(0);$('#qrcodeImg').attr('src', canvas.toDataURL('image/jpg')); });
5.遇坑及解决方法
遇到的问题:
1.生成了二维码图片,保存用微信识别的时候部分安卓机不去识别;
解决方法:
可能生成二维码的url过长,可适当增大qrcode()中二维码的宽高;
注意:url如果过长生成的二维码会有问题,建议直接url字符串不要过长150个字符以内;
另外一个二维码demo下载地址 https://github.com/yingliyu/qrCode.git
参考:http://www.jq22.com/jquery-info294
转载于:https://www.cnblogs.com/imelemon/p/6677956.html
jquery生成二维码图片相关推荐
- jquery 生成二维码并嵌入图片
用到的js 库 jquery-3.3.1.min.js jquery.qrcode.min.js html2canvas.js (百度云链接:https://pan.baidu.com/s ...
- qrCode生成二维码图片
QRCode.js 是一个用于生成二维码图片的插件. 1.文件脚本 var QRCode;!function(){function a(a){this.mode=c.MODE_8BIT_BYTE,th ...
- 使用jquery生成二维码 并添加logo图标
使用插件js文件在前端生成二维码图片 还使用到了一个添加logo图标的js文件 utf.js 直接贴上代码 jquery版本应该是都可以的吧 我的是我项目使用的版本js <!--HTML的标准文 ...
- libqrencode生成二维码图片的问题
libqrencode在生成编码后,如何生成二维码图片.可以通过libpng来生成二维码图片文件.但在在网络通信中,先生成二维码图片文件,再读取文件数据,发送出去,这是一种可行的方法. 但是有没有一种 ...
- C# 利用QRCode生成二维码图片
网上生成二维码的组件是真多,可是真正好用的,并且生成速度很快的没几个,QRCode就是我在众多中找到的,它的生成速度快.但是网上关于它的使用说明,真的太少了,大都是千篇一律的复制粘贴.这是本要用它做了 ...
- 使用Java生成二维码图片(亲测)
下面我来分享两种生成二维码图片的方法. 第一种,填入你扫描二维码要跳转的网址直接生成二维码 第一步:导入相关的包 1 <dependency> 2 <groupId>com.g ...
- 基于ZXing Android实现生成二维码图片和相机扫描二维码图片即时解码的功能
NextQRCode ZXing开源库的精简版 **基于ZXing Android实现生成二维码图片和相机扫描二维码图片即时解码的功能 原文博客 附源码下载地址** 与原ZXingMini项目对比 N ...
- PHP根据指定url生成二维码图片
一.composer安装 http://packagist.p2hp.com/packages/codeitnowin/barcode 二.使用 调用generateQrCode()方法即可实现生成二 ...
- springboot2整合二维码 生成二维码图片及输出web端及打印
step1 导包 <!-- 二维码 --><dependency><groupId>com.google.zxing</groupId><arti ...
最新文章
- RAC 修改 DB 实例名 步骤
- python中的数据类型和常用运算符
- Golang之envconfig的使用
- CentOS 下多线程下载工具:axel
- 下午带着几个同学打了两节课的牌~
- linux 备份mysql并上传_linux备份数据库并上传至远程服务器(定时执行shell进行ftp上传)...
- python alter_GitHub - sealter/LearnPython: 以撸代码的形式学习Python
- CocoaPods安装及使用
- 开启MySQL的binlog日志
- Java研发方向如何准备BAT技术面试
- dataGridView单元格引用
- SSL 1203 书的复制
- SQL 查询 skip locked的使用
- 计算机更改虚拟内存有用吗,电脑内存不足怎么办,虚拟内存能起到多大作用
- html设置图片为黑白,CSS 将彩色图片转换成黑白图片
- 基于飞浆ERNIE3.0百亿级大模型实现中文短文本分类任务
- mysql中如何求出学生人数,mysql中如何查询同时参加计算机考试和英语考试的学生人数...
- 我,程序员,32岁失业后干啥都赔钱,月薪2万的好日子一去不返
- python describe 分位数设置_Python Pandas – 如何通过describe函数计算25百分位数
- Python学习--Day07--正则表达式
热门文章
- python刷新显示_Python在同一位置刷新显示进度信息
- 如何使用mysql建立项目_【dbForge Studio for MySQL入门教程】如何在项目中使用数据库对象和如何使用项目构建配置...
- 工作中遇到的问题——2018年
- oracle net conf启动无反应,weblogic突然无法启动,显示Server state changed to FORCE
- 软件测试面试:请说一下你工作中发现的最有价值的bug?
- 面试被问:Selenium元素定位不到问题,如何回答?
- linux内核编译选项ccl,嵌入式Linux学习笔记(一)
- MySQL数值型超出范围_MySQL 数值类型溢出处理
- winx修改计算机用户名,怎么修改我的电脑用户名win10
- mysql regexp边界_MySQL中REGEXP正则表达式使用大全