JavaScript生成二维码图片小结


Posted in Javascript onDecember 27, 2015

摘要:

百度百科上是这样介绍二维码的:二维码(Quick Response Code),又称二维条码,它是用特定的几何图形按一定规律在平面(二维方向)上分布的黑白相间的图形,是所有信息数据的一把钥匙。在现代商业活动中,可实现的应用十分广泛,如:产品防伪/溯源、广告推送、网站链接、数据下载、商品交易、定位/导航、电子商务应用、车辆管理、信息传递等。如今智能手机扫一扫(简称313)功能的应用使得二维码更加普遍,随着国内物联网产业的蓬勃发展,更多的二维码技术应用解决方案被开发,二维码成为移动互联网入口真正成为现实。

我们在上网时随处可见的是二维码,那么在前端如何生成二维码呢?今天我就来分享下前端生成二维码。

简介:

QRCode.js是js的一个库,跨浏览器支持HTML5画布和表格标记在DOM中。我们所使用的就是基于QRCode.js。

浏览器:

IE6~10, Chrome, Firefox, Safari, Opera, Mobile Safari, Android, Windows Mobile, ETC.

jquery-qrcode:

jquery-qrcode特点:操作简单,体积小,压缩之后只有14k,但是不支持中文编码。

<script src="http://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="../jquery.qrcode.min.js"></script>
<div id="qrcode"></div>
<script>
$(function(){
$('#qrcode').qrcode("http://www.cnblogs.com/xiyangbaixue");
// 更详细的配置
// $('#qrcode').qrcode({
// text: "http://www.cnblogs.com/xiyangbaixue", // 要编码的字符串
// width: 50, // 定义宽度
// height: 50, // 定义高度
// background: "#ccc", // 背景色
// foreground: "red" // 前景色
// });
})
</script>

效果:

JavaScript生成二维码图片小结

qrcodejs:

qrcodejs特点:中文生成的二维码扫描不会出现乱码,且可以选择使用哪种元素来画二维码。

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="qrcode.js"></script>
<div id="qrcode"></div>
<script>
new QRCode(document.getElementById("qrcode"), "http://www.cnblogs.com/xiyangbaixue");
// 或者
// new QRCode(document.getElementById("qrcode"), {
// text: "http://www.cnblogs.com/xiyangbaixue",
// width: 50,
// height: 50,
// background: "#ccc",
// foreground: "red"
// });
</script>

使用svg:

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="qrcode.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="qrcode"/>
</svg>
<script type="text/javascript">
var qrcode = new QRCode(document.getElementById("qrcode"), {
width : 100,
height : 100,
useSVG: true
});
qrcode.makeCode("http://www.cnblogs.com/xiyangbaixue");
// qrcode.clear(); // 清除二维码
</script>

效果:

JavaScript生成二维码图片小结

配置参数:

render string

配置用哪个节点元素画二维码,选项有table、svg和canvas

默认的选择顺序为 canvas -> svg -> table

text string

要编码的字符串

默认:""

width number

二维码的长,单位是px

需要注意的是,当使用table或者svg绘制二维码时,会适当减小,使得能够整除二维码矩阵的维度。

默认:256

height number

二维码的宽,单位是px

需要注意的是,当使用table或者svg绘制二维码时,会适当减小,使得能够整除二维码矩阵的维度。

默认:256

correctLevel number

纠错级别,可取0、1、2、3,数字越大说明所需纠错级别越大

默认:3

background color

背景色

默认:#FFFFFF

foreground color

前景色

默认:#000000

Javascript 相关文章推荐
仿中关村在线首页弹出式广告插件(jQuery版)
May 03 Javascript
jQuery.each()用法分享
Jul 31 Javascript
JavaScript 开发工具webstrom使用指南
Dec 09 Javascript
JavaScript不使用prototype和new实现继承机制
Dec 29 Javascript
jQuery浏览器CSS3特写兼容实例
Jan 19 Javascript
AngularJS 过滤器的简单实例
Jul 27 Javascript
jQuery.uploadify文件上传组件实例讲解
Sep 23 Javascript
微信小程序 location API接口详解及实例代码
Oct 12 Javascript
Vue Router的懒加载路径的解决方法
Jun 21 Javascript
vue.js通过路由实现经典的三栏布局实例代码
Jul 08 Javascript
浅谈Vue中render中的h箭头函数
Nov 07 Javascript
JavaScript实现HSL拾色器
May 21 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
Dec 26 #Javascript
Knockout自定义绑定创建方法
Dec 26 #Javascript
JavaScript动态设置div的样式的方法
Dec 26 #Javascript
JS插件overlib用法实例详解
Dec 26 #Javascript
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
Dec 26 #Javascript
认识Knockout及如何使用Knockout绑定上下文
Dec 25 #Javascript
详解Document.Cookie
Dec 25 #Javascript
You might like
网站用php实现paypal整合方法
2010/11/28 PHP
php异常处理技术,顶级异常处理器
2012/06/13 PHP
Joomla数据库操作之JFactory::getDBO用法
2016/05/05 PHP
PHP设计模式之工厂模式(Factory Pattern)的讲解
2019/03/21 PHP
javascript (用setTimeout而非setInterval)
2011/12/28 Javascript
深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
2012/01/15 Javascript
jquery判断浏览器类型的代码
2012/11/05 Javascript
jquery实现图片按比例缩放示例
2014/07/01 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
2014/07/18 Javascript
Node.js抓取中文网页乱码问题和解决方法
2015/02/10 Javascript
使用jspdf生成pdf报表
2015/07/03 Javascript
jQuery实现的进度条效果
2015/07/15 Javascript
javascript实现状态栏文字首尾相接循环滚动的方法
2015/07/22 Javascript
jQuery的Each比JS原生for循环性能慢很多的原因
2016/07/05 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
2016/09/17 Javascript
对于Javascript 执行上下文的全面了解
2017/09/05 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
2018/01/20 Javascript
javascript+HTML5 canvas绘制时钟功能示例
2019/05/15 Javascript
微信小程序HTTP接口请求封装代码实例
2019/09/05 Javascript
JQuery发送ajax请求时中文乱码问题解决
2019/11/14 jQuery
prettier自动格式化去换行的实现代码
2020/08/25 Javascript
vue print.js打印支持Echarts图表操作
2020/11/13 Javascript
[01:11:08]Winstrike vs NB 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
Python实现Sqlite将字段当做索引进行查询的方法
2016/07/21 Python
python用线性回归预测股票价格的实现代码
2019/09/04 Python
keras得到每层的系数方式
2020/06/15 Python
Python collections模块的使用方法
2020/10/09 Python
Python APScheduler执行使用方法详解
2020/12/10 Python
CSS3弹性盒模型flex box快速入门心得(必看篇)
2016/05/24 HTML / CSS
英国殿堂级有机护肤品牌:Rodial
2017/04/17 全球购物
Myprotein亚太地区:欧洲第一在线运动营养品牌
2020/12/20 全球购物
什么是类的返射机制
2016/02/06 面试题
教育科研先进个人材料
2014/01/26 职场文书
党的群众路线教育实践活动宣传方案
2014/02/23 职场文书
会计求职简历自我评价
2015/03/10 职场文书
html+css实现环绕倒影加载特效
2021/07/07 HTML / CSS