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 globalStorage类代码
Jun 04 Javascript
将jQuery应用于login页面的问题及解决
Oct 17 Javascript
JavaScript 学习笔记(十四) 正则表达式
Jan 22 Javascript
imgAreaSelect 中文文档帮助说明
Oct 08 Javascript
javascript动态添加checkbox复选框的方法
Dec 23 Javascript
使用JQuery实现智能表单验证功能
Mar 08 Javascript
jquery实现下拉框多选方法介绍
Jan 03 Javascript
JS实现的点击表头排序功能示例
Mar 27 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
Feb 22 Javascript
Vue resource三种请求格式和万能测试地址
Sep 26 Javascript
ES6的异步终极解决方案分享
Jul 11 Javascript
JS实现纸牌发牌动画
Jan 19 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
ADODB的数据库封包程序库
2006/12/31 PHP
PHP MemCached 高级缓存应用代码
2010/08/05 PHP
模板引擎正则表达式调试小技巧
2011/07/20 PHP
ThinkPHP利用PHPMailer实现邮件发送实现代码
2013/09/26 PHP
PHP统一页面编码避免乱码问题
2015/04/09 PHP
jquery 插件开发方法小结
2009/10/23 Javascript
JavaScript面向对象程序设计三 原型模式(上)
2011/12/21 Javascript
js opener的使用详解
2014/01/11 Javascript
Javascript数据结构与算法之列表详解
2015/03/12 Javascript
JavaScript对象数组排序函数及六个用法
2015/12/23 Javascript
javascript先序遍历DOM树的方法
2016/02/27 Javascript
jquery实现刷新随机变化样式特效(tag标签样式)
2017/02/03 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
2017/05/02 Javascript
BootStrap 获得轮播中的索引和当前活动的焦点对象
2017/05/11 Javascript
详解JavaScript按概率随机生成事件
2017/08/02 Javascript
react-native ListView下拉刷新上拉加载实现代码
2017/08/03 Javascript
JavaScrip数组删除特定元素的几种方法总结
2017/09/06 Javascript
JS实现的数组去除重复数据算法小结
2017/11/17 Javascript
jquery如何实现点击空白处隐藏元素
2017/12/05 jQuery
详解VUE2.X过滤器的使用方法
2018/01/11 Javascript
全新打包工具parcel零配置vue开发脚手架
2018/01/11 Javascript
ejsExcel模板在Vue.js项目中的实际运用
2018/01/27 Javascript
JS实现使用POST方式发送请求
2019/08/30 Javascript
Python爬虫抓取手机APP的传输数据
2016/01/22 Python
Python实现去除列表中重复元素的方法小结【4种方法】
2018/04/27 Python
django将图片上传数据库后在前端显式的方法
2018/05/25 Python
英国Zoro工具:手动工具,电动工具和个人防护用品
2016/11/02 全球购物
描述内存分配方式以及它们的区别
2016/10/15 面试题
营销专业应届生求职信
2013/11/26 职场文书
应届毕业生应聘自荐信范文
2014/02/26 职场文书
知识改变命运演讲稿
2014/05/21 职场文书
老干部座谈会主持词
2015/07/03 职场文书
2016情人节宣传语
2015/07/14 职场文书
创业计划书之酒店
2019/08/30 职场文书
如何理解及使用Python闭包
2021/06/01 Python
nginx实现多geoserver服务的负载均衡
2022/05/15 Servers