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 相关文章推荐
JavaScript 动态添加表格行 使用模板、标记
Oct 24 Javascript
jquery中的事件处理详细介绍
Jun 24 Javascript
javascript实现一个数值加法函数
Jun 26 Javascript
jquery插件jquery.confirm弹出确认消息
Dec 22 Javascript
获取select的value、text值的简单示例(jquery与javascript)
Dec 07 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
js中位运算的运用实例分析
Dec 11 Javascript
Vue分页器实现原理详解
Jun 28 Javascript
在layui中select更改后生效的方法
Sep 05 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
Dec 21 Javascript
解析原生JS getComputedStyle
May 25 Javascript
JS setTimeout与setInterval的区别
Apr 20 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
在Windows中安装Apache2和PHP4的权威指南
2006/10/09 PHP
phpmailer发送gmail邮件实例详解
2013/06/24 PHP
php文件包含目录配置open_basedir的使用与性能详解
2017/04/03 PHP
ThinkPHP 在阿里云上的nginx.config配置实例详解
2017/10/11 PHP
PHP使用SOAP调用API操作示例
2018/12/25 PHP
Javascript 日期对象Date扩展方法
2009/05/30 Javascript
jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
2009/08/28 Javascript
javascript真的不难-回顾一下基础知识
2013/01/15 Javascript
jQuery中读取json文件示例代码
2013/05/10 Javascript
jquery按回车提交数据的代码示例
2013/11/05 Javascript
jQuery使用after()方法在元素后面添加多项内容的方法
2015/03/26 Javascript
浅谈javascript中基本包装类型
2015/06/03 Javascript
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
2015/08/27 Javascript
asp知识整理笔记3(问答模式)
2015/09/27 Javascript
AngularJs 指令详解及示例代码
2016/09/01 Javascript
JavaScript九九乘法口诀表的简单实现
2016/10/04 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
2019/02/02 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
2019/06/11 Javascript
uniapp与webview之间的相互传值的实现
2020/06/29 Javascript
Nodejs 数组的队列以及forEach的应用详解
2021/02/25 NodeJs
python enumerate函数的使用方法总结
2017/11/15 Python
对Python中列表和数组的赋值,浅拷贝和深拷贝的实例讲解
2018/06/28 Python
python 中pyqt5 树节点点击实现多窗口切换问题
2019/07/04 Python
Python中新式类与经典类的区别详析
2019/07/10 Python
Python API自动化框架总结
2019/11/12 Python
tensorflow的ckpt及pb模型持久化方式及转化详解
2020/02/12 Python
在Sublime Editor中配置Python环境的详细教程
2020/05/03 Python
HTML5仿微信聊天界面、微信朋友圈实例代码
2018/01/29 HTML / CSS
办公室文员工作自我评价
2013/12/01 职场文书
颁奖晚会主持词
2014/03/25 职场文书
法人单位适用的授权委托书
2014/09/19 职场文书
在职证明范本
2015/06/15 职场文书
如何写观后感
2015/06/19 职场文书
关于军训的感想
2015/08/07 职场文书
作文之亲情600字
2019/09/23 职场文书
使用pandas生成/读取csv文件的方法实例
2021/07/09 Python