您的位置：首页 > Web前端 > JavaScript

QRcodeJS生成二维码

2015-11-26 20:00 645 查看

QRCode.js

QRCode.js是依赖JS生成二维码的.主要是通过获取DOM的标签,再通过HTML5Canvas绘制而成,不依赖JQ

获取QRCode.js

Github-Page:qrcode.js
Github-Repository

有tar.gz包和zip包.

引入及用法

引入

只要在

<head></head>

中引入即可使用,JQ不依赖,可以替换其他版本JQ(其他内容有用到JQ,比如选择器获取)

<script type="text/javascript" src="qrcode.js"></script>

基本用法

获取块,直接调用默认方法(输入生成的字符串即可生成二维码)

<div id="qrcode"></div>
<script type="text/javascript">
new QRCode(document.getElementById("qrcode"), "https//blog.csdn.net/crper");
</script>

进阶用法

QRCODE支持以下参数:

width(宽度)

height(高度)

colorDark(背景色)

colorLight(前景色)

correctLevel(容错级别,支持L,M,H)Low/Middle/High

var qrcode = new QRCode("test", {
text: "https//blog.csdn.net/crper",
width: 400,
height: 400,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
});

qrcode.clear(); // 清除二维码
qrcode.makeCode("http://naver.com"); // 生成另外一个二维码

在线生成函数

这个函数是获取id为text,判断内容是否为空,为空则弹窗提醒,不为空则生成二维码

function makeCode () {
var elText = document.getElementById("text");

if (!elText.value) {
alert("请输入您要生成的二维码内容!");
elText.focus();
return;
}

qrcode.makeCode(elText.value);
}

makeCode();

通过调用blur和keydown来触发,,当脱离焦点点击的时候生成二维码,或者输入内容后按下回车键(Enter)生成

$("#text").
on("blur", function () {
makeCode();
}).
on("keydown", function (e) {
if (e.keyCode == 13) {
makeCode();
}
});

实战小例子

<!DOCTYPE html>
<html>

<head>
<title>Demo</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="jquery.min.js"></script>
<script type="text/javascript" src="qrcode.js"></script>
<style>
#qrcode {
height: 300px;
width: 300px;
background: #eee;
}

input {
height: 25px;
line-height: 25px;
width: 300px;
}

</style>
</head>

<body>
<input id="text" type="text" value="这是一个测试文本,清除后输入您要生成的内容" />
<div id="qrcode"></div>

<!--脚本就是要放在后面.......-->
<script type="text/javascript">
var qrcode = new QRCode(document.getElementById("qrcode"), {
width: 300,
height: 300,
colorDark: "#000000",
colorLight: "#03f594",
correctLevel: QRCode.CorrectLevel.L
});

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>

浏览器适配,支持下列


PC	Mobile
IE6~10	Mobile Safari
Chrome	Android
Firefox	Windows Mobile
Safari
Opera

遵循协议

http://www.bubuko.com/infodetail-825496.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航