QRCode.js:使用 JavaScript 生成二维码
什么是 QRCode.js?
QRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。
基本用法
载入 JavaScript 文件
<script type="text/javascript" src="http://static.runoob.com/assets/qrcode/qrcode.min.js"></script>
DOM结构
<div id="qrcode"></div>
JavaScropt调用
//简单形式
new QRCode(document.getElementById("qrcode"), "http://www.runoob.com"); // 设置要生成二维码的链接 // 设置参数方式
var qrcode = new QRCode("test", {
text: "http://www.runoob.com",
width: 128,
height: 128,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
}); // 使用 API
qrcode.clear();
qrcode.makeCode('new content');
参数说明
new QRCode(element, option)
名称 | 默认值 | 说明 |
---|---|---|
element | - | 显示二维码的元素或该元素的 ID |
option | 参数配置 |
option 参数说明
名称 | 默认值 | 说明 |
---|---|---|
width | 256 | 图像宽度 |
height | 256 | 图像高度 |
colorDark | "#000000" | 前景色 |
colorLight | "#ffffff" | 背景色 |
correctLevel | QRCode.CorrectLevel.L | 容错级别,可设置为:
QRCode.CorrectLevel.L QRCode.CorrectLevel.M QRCode.CorrectLevel.Q QRCode.CorrectLevel.H |
API 接口
名称 | 说明 |
---|---|
makeCode(text) | 设置二维码内容 |
clear() | 清除二维码。(仅在不支持 Canvas 的浏览器下有效) |
浏览器支持
支持该库的浏览器有:IE6~10, Chrome, Firefox, Safari, Opera, Mobile Safari, Android, Windows Mobile, 等。
实例代码
HTML 代码
<input id="text" type="text" value="http://www.runoob.com" /><br />
<div id="qrcode"></div>
CSS 代码
#qrcode {
width:160px;
height:160px;
margin-top:15px;
}
JavaScript 代码
var qrcode = new QRCode("qrcode"); function makeCode () {
var elText = document.getElementById("text"); if (!elText.value) {
alert("Input a text");
elText.focus();
return;
} qrcode.makeCode(elText.value);
} makeCode(); $("#text").
on("blur", function () {
makeCode();
}).
on("keydown", function (e) {
if (e.keyCode == 13) {
makeCode();
}
});
HTML完整代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<title>Javascript 二维码生成库:QRCode</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://static.runoob.com/assets/qrcode/qrcode.min.js"></script>
</head>
<body>
<input id="text" type="text" value="http://www.runoob.com" style="width:80%" /><br />
<div id="qrcode" style="width:100px; height:100px; margin-top:15px;"></div> <script type="text/javascript">
var qrcode = new QRCode(document.getElementById("qrcode"), {
width : 100,
height : 100
}); function makeCode () {
var elText = document.getElementById("text"); if (!elText.value) {
alert("Input a text");
elText.focus();
return;
} qrcode.makeCode(elText.value);
} makeCode(); $("#text").
on("blur", function () {
makeCode();
}).
on("keydown", function (e) {
if (e.keyCode == 13) {
makeCode();
}
});
</script>
</body>
</html>
QRCode.js:使用 JavaScript 生成二维码的更多相关文章
- JavaScript生成二维码图片
1.引入一个二维码工具的js文件,同时需要引入jquery文件 下面是jquery.qrcode.min.js文件内容: (function(r){r.fn.qrcode=function(h){va ...
- 使用JavaScript生成二维码教程-附qrcodejs中文文档
使用javascript生成二维码 依赖jquery 需要使用到的库 https://github.com/davidshimjs/qrcodejs DIV <div id="qrco ...
- QrCode C#生成二维码 及JavaScript生成二维码
一 C#的二维码 示例: class Program { static void Main(string[] args) { QrEncoder qrEncoder = new QrEncode ...
- qrcode.js的识别解析二维码图片和生成二维码图片
qrcode只通过前端就能生成二维码和解析二维码图片, 首先要引入文件qrcode.js,下载地址为:http://static.runoob.com/download/qrcodejs-04f46c ...
- 前端生成二维码 - Javascript生成二维码(QR)
前段时间项目中需要动态的生成二维码,经过评估,前后端生成都可以.但后端生成会有两个问题: 没有找到正规发布出来的后端开源库. 二维码图片,会随着商品的增加而不断变多. 基于以上两个问题,决定在前端生成 ...
- Javascript生成二维码(QR)
网络上已经有非常多的二维码编码和解码工具和代码,很多都是服务器端的,也就是说需要一台服务器才能提供二维码的生成.本着对服务器性能的考虑,这种小事情都让服务器去做,感觉对不住服务器,尤其是对于大流量的网 ...
- Jquery.Qrcode在客户端动态生成二维码并添加自定义Logo
0 Jquery.Qrcode简介 Jquery.Qrcode.js是一个在浏览器端基于Jquery动态生成二维码的插件,支持Canvas和Table两种渲染方式,它的优点是在客户端动态生成,减轻了服 ...
- 在input中输入需要的数据,使用qrcode,点击生成二维码
话不多说直接上代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&quo ...
- javaScript生成二维码(支持中文,生成logo)
资料搜索 选择star最多的两个 第一个就是用的比较多的jquery.qrcode.js(但不支持中文,不能带logo)啦,第二个支持ie6+,支持中文,根据第二个源代码,使得,jquery.qrco ...
随机推荐
- java double相加
public class DoubleUtil { private static final int DEF_DIV_SCALE = 10; /** * 相加 * * @param d1 * @par ...
- maven入门(6)maven的生命周期
1. 三套生命周期 Maven拥有三套相互独立的生命周期,它们分别为clean,default和site. 每个生命周期包含一些阶段,这些阶段是有顺序的,并且后面的阶段依赖于前面的阶段,用户和 ...
- GIT入门笔记(19)GIT 小结
1.add和commit为什么Git添加文件需要add,commit一共两步呢?因为commit可以一次提交很多文件,所以你可以多次add不同的文件,比如:$ git add file1.txt$ g ...
- 道可道,非常道——详解promise
promise 出来已久,以前一直使用,没有仔细剖析原理,最近在复习es6的知识,写一下自己对于promise的理解. promise是es6的一种异步编程解决方案,避免频繁的回调函数,增强代码的可阅 ...
- Hive函数:LAG,LEAD,FIRST_VALUE,LAST_VALUE
参考自大数据田地:http://lxw1234.com/archives/2015/04/190.htm 测试数据准备: create external table test_data ( cooki ...
- PHP 常用header头定义
在php的开发中,我们常常需要使用到header函数头来进行做标记 header() 函数向客户端发送原始的 HTTP 报头. 常用header设置列表如下: header('HTTP/1.1 200 ...
- CentOS 6.8下二级域名及目录的绑定
二级域名对应目录的绑定: 第一步: 开启mod_rewrite模块,默认是开启的,这里可以查下是否开启 终端输入:vim /etc/httpd/conf/httpd.conf 回车 查看188行:L ...
- WPF 自定义TreeView控件样式,仿QQ联系人列表
一.前言 TreeView控件在项目中使用比较频繁,普通的TreeView并不能满足我们的需求.因此我们需要滴对TreeView进行改造.下面的内容将介绍仿QQ联系人TreeView样式及TreeVi ...
- Spring MVC基础学习
SpringMVC是Spring框架的一个模块,无需通过中间层整合在一起.SpringMVC是一个基于MVC设计模式web框架,MVC-model-view-controller:MVC将服务器端分为 ...
- 学习HTML的第二次课
1.图片 <img / > 图片的格式: 1.1BMP 占用空间大,颜色丰富. 1.2JPEG 有损压缩,占用空间较小. 1.3GIF 多帧动图,支持透明色. 1.4PNG 无损压缩,位图 ...