转载---QRcodeJS生成二维码
QRCode.js
QRCode.js是依赖JS生成二维码的.主要是通过获取DOM的标签,再通过HTML5Canvas绘制而成,不依赖JQ
获取QRCode.js
- Github-Page:qrcode.js
- 有tar.gz包和zip包.
- Github-Repository
引入及用法
引入
- 只要在
<head></head>中引入即可使用,JQ不依赖,可以替换其他版本JQ(其他内容有用到JQ,比如选择器获取)
<script type="text/javascript" src="qrcode.js"></script>- 1
- 1
基本用法
获取块,直接调用默认方法(输入生成的字符串即可生成二维码)
<div id="qrcode"></div>
<script type="text/javascript">
new QRCode(document.getElementById("qrcode"), "https//blog.csdn.net/crper");
</script>- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
进阶用法
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"); // 生成另外一个二维码- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
在线生成函数
这个函数是获取id为text,判断内容是否为空,为空则弹窗提醒,不为空则生成二维码
function makeCode () {
var elText = document.getElementById("text");
if (!elText.value) {
alert("请输入您要生成的二维码内容!");
elText.focus();
return;
}
qrcode.makeCode(elText.value);
}
makeCode();- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
通过调用blur和keydown来触发,,当脱离焦点点击的时候生成二维码,或者输入内容后按下回车键(Enter)生成
$("#text").
on("blur", function () {
makeCode();
}).
on("keydown", function (e) {
if (e.keyCode == 13) {
makeCode();
}
});- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
实战小例子
<!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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
浏览器适配,支持下列
| PC | Mobile |
|---|---|
| IE6~10 | Mobile Safari |
| Chrome | Android |
| Firefox | Windows Mobile |
| Safari | |
| Opera |
遵循协议
MIT License
转载---QRcodeJS生成二维码的更多相关文章
- qrcodeJS生成二维码
后续抽时间自己来整理笔记 http://code.ciaoca.com/javascript/qrcode/
- 使用JavaScript生成二维码教程-附qrcodejs中文文档
使用javascript生成二维码 依赖jquery 需要使用到的库 https://github.com/davidshimjs/qrcodejs DIV <div id="qrco ...
- 转载【TP3.2】：使用PHP生成二维码
转载:在网上down了一个二维码插件PHPQRcode,整合到了ThinkPHP 3.2.3,然后写了个外部自定义函数直接调用生成二维码,根据参数不同有不同尺寸效果,整合其实挺简单,分享给大家! 今天 ...
- VUE 生成二维码(qrcodejs)
1. 概述 1.1 引入二维码生成模块 npm install qrcodejs2 --save 注意:此处安装qrcodejs2,安装依赖后可在main方法中进行全局引用设置,也可单独某个页面中进行 ...
- 使用jquery-qrcode生成二维码（转载）
一.使用jquery-qrcode生成二维码 先简单说一下jquery-qrcode,这个开源的三方库(可以从https://github.com/jeromeetienne/jquery-qrcod ...
- js生成二维码（jquery自带）
//引入js<script type="text/javascript" src="js/jquery.js"></script> &l ...
- C# Qrcode生成二维码支持中文,带图片，带文字 2015-01-22 15:11 616人阅读 评论(1) 收藏
1.下载Qrcode库源码,下载地址:http://www.codeproject.com/Articles/20574/Open-Source-QRCode-Library 2.打开源码时,部分类库 ...
- thinkphp整合系列之phpqrcode生成二维码
php生成二维码其实挺简单的:当然指的是使用qrcode类库: 因此关于是否要写这篇博客:我是犹豫了再三的: 不过最后还是决定写下吧:如果有童鞋急着用:就可以直接引了: 再个也可以作为即将写的文章微信 ...
- Cordova各个插件使用介绍系列（二）—$cordovaBarcodeScanner扫描二维码与生成二维码
详情链接地址:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/cordova-2-cordovabarcodescanner/ 这是 ...
随机推荐
- [转] sql_id VS hash_value
有没有发现,v$session,v$sql,v$sqlarea,v$sqltext,v$sql_shared_cursor等试图连接的时候经常会用到hash_value,sql_id,但是他们2个之间 ...
- 2014 Hangjs 见闻流水账第一天
前言 6月21日~6月22日, 第一次跑远门去参加一个大会(广州 -> 杭州),本来打算,在火车的回来的路上,把这两天的东西记录一下,不过,火车上的环境实在恶劣,同时也高估了自己的专注力,所以, ...
- Flask-Babel 中文支持（zh-CN和zh-Hans-CN）
命名的翻译文件夹必须命名为zh_Hans-CN,其他的都是不标准的命名!
- 【转帖】Moodle平台的5个新玩法
[玩坏Moodle平台]Moodle平台的5个新玩法 1.RSS订阅 Moodle平台可以导入外部博客(或其他提供RSS的服务),并显示在Moodle内置的博客系统中.无论是自己的个人网站还是他人的博 ...
- C#代理那点事儿
Func代理是啥? Func代理接收0个或多个参数,返回TResult值: 以Func<TSource, TResult>为例:Func带来封装一个方法,该方法接收一个参数,然会一个TRe ...
- 浅谈html5网页内嵌视频
更好的阅读体验:浅谈html5网页内嵌视频 如今在这个特殊的时代下:flash将死未死,微软和IE的历史问题,html5标准未定,苹果和谷歌的闭源和开源之争,移动互联网的大势所趋,浏览器各自为战... ...
- .NET Framework 类库
.NET Framework 类库 MSDN == V2.0 == .NET Framework 类库是一个由 Microsoft .NET Framework SDK 中包含的类.接口和值类型组成的 ...
- FastSocket.Net
Overview FastSocket是一个轻量级易扩展的c#异步socket通信库,项目开始于2011年,经过近3年不断调整与改进,目前在功能和性能上均有不错的表现. 项目地址:https://gi ...
- listview 设置数组为空
listview.setEmpty(View view); 使用listView或者gridView时,当列表为空时,有时需要显示一个特殊的empty view来提示用户,今日对这个方法进行一下小结, ...
- DMSFrame 之SqlCacheDependency（二）
上篇文章介绍的是通知模式的缓存机制,这里介绍的是数据库轮循模式处理,这种模式对SQL2005以下的支持还是比较好的 引擎源码如下: /// <summary> /// 轮循模式 /// 数 ...