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 相关文章推荐
JS 页面自动加载函数(兼容多浏览器)
May 18 Javascript
js网页中的(运行代码)功能实现思路
Feb 04 Javascript
javascript数组详解
Oct 22 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
Dec 26 Javascript
谈谈Jquery ajax中success和complete有哪些不同点
Nov 20 Javascript
VUE实现日历组件功能
Mar 13 Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
Apr 19 Javascript
node通过express搭建自己的服务器
Sep 30 Javascript
vue解决使用webpack打包后keep-alive不生效的方法
Sep 01 Javascript
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 jQuery
浅析Angular 实现一个repeat指令的方法
Jul 21 Javascript
layui输入框中只允许输入整数的实现方法
Sep 18 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
ThinkPHP使用PHPExcel实现Excel数据导入导出完整实例
2014/07/22 PHP
字符串长度函数strlen和mb_strlen的区别示例介绍
2014/09/09 PHP
php控制文件下载速度的方法
2015/03/24 PHP
PHP实现的进度条效果详解
2016/05/03 PHP
Yii2实现ActiveForm ajax提交
2017/05/26 PHP
原型方法的不同写法居然会影响调试的解决方法
2007/03/08 Javascript
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
2010/06/11 Javascript
JavaScript对象创建及继承原理实例解剖
2013/02/28 Javascript
Javascript表格翻页效果的具体实现
2013/10/05 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
2014/04/17 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
2015/08/30 Javascript
JS学习之表格的排序简单实例
2016/05/16 Javascript
基于zepto.js简单实现上传图片
2016/06/21 Javascript
react实现pure render时bind(this)隐患需注意!
2017/03/09 Javascript
Vue.js路由vue-router使用方法详解
2017/03/20 Javascript
浅谈Node.js CVE-2017-14849 漏洞分析(详细步骤)
2017/11/10 Javascript
jQuery实现的五星点评功能【案例】
2019/02/18 jQuery
[55:25]VGJ.T vs Optic Supermajor小组赛D组 BO3 第三场 6.3
2018/06/04 DOTA
python在linux系统下获取系统内存使用情况的方法
2015/05/11 Python
Python教程之全局变量用法
2016/06/27 Python
在Python中字典根据多项规则排序的方法
2019/01/21 Python
Python接口测试get请求过程详解
2020/02/28 Python
Fresh馥蕾诗英国官网:法国LVMH集团旗下高端天然护肤品牌
2018/11/01 全球购物
机电一体化毕业生求职信
2013/11/02 职场文书
个人求职简历中英文自我评价
2013/12/16 职场文书
中学生个人自我评价
2014/02/06 职场文书
会计电算化学生个人的自我评价
2014/02/08 职场文书
高中军训感言200字
2014/02/23 职场文书
工商干部先进事迹
2014/05/14 职场文书
家长会欢迎标语
2014/06/24 职场文书
优秀家长自荐材料
2014/08/26 职场文书
大学生心理健康教育心得体会
2016/01/12 职场文书
2019大学生预备党员转正思想汇报
2019/06/21 职场文书
七个Python必备的GUI库
2021/04/27 Python
修改MySQL的默认密码的四种小方法
2021/05/26 MySQL
JavaScript选择器函数querySelector和querySelectorAll
2021/11/27 Javascript