转载---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/ 这是 ...
随机推荐
- 【linux】文件隐藏属性
这些隐藏的属性确实对于系统有很大的帮助的- 尤其是在系统安全 (Security) 上面,重要的紧呢!不过要先强调的是,底下的chattr指令只能在Ext2/Ext3的文件系统上面生效, 其他 ...
- memcpy memmove区别和实现
memcpy与memmove的目的都是将N个字节的源内存地址的内容拷贝到目标内存地址中. 但当源内存和目标内存存在重叠时,memcpy会出现错误,而memmove能正确地实施拷贝,但这也增加了一点点开 ...
- 突然顿悟的Javascript中的this
一直对Javascript中的this都有一种似是而非的感觉,今天突然感觉豁然开朗,特此记录一下. 咱们先看个栗子: <!DOCTYPE html> <html> <he ...
- .net core 使用Autofac依赖注入
Startup中: public IContainer ApplicationContainer { get; private set; } // This method gets called by ...
- JIRA 6.3.6版本部署
JIRA 6.3.6版本部署 部署环境:Ubuntu Server .JDK1.7 JIRA文件:atlassian-jira-6.3.6.tar.gz 下载地址:百度云网盘地址http://pan. ...
- Linux 输出文件列数，拼接文件
如果我只想看看文件的前几行,每行的字段数(列数),我的文件已tab作为分隔符(这个可以自己指定),其具体命令如下: head fileName | awk -F'\t' '{print NF}' 如果 ...
- atom 安装插件出现 EIO 错误
今天给 atom 安装一个插件autocomplete-python的时候出现错误 npm ERR! Windows_NT 6.1.7600 npm ERR! argv "C:\\Progr ...
- 告诉你吧，一套皮肤在winform与wpf开发模式下实现的界面效果同样精彩，winform界面和wpf界面。
一.同一资源: 二.先上软件界面: (1)wpf界面: 在wpf中实现这样类似web风格的软件界面就不用我多说了,在wpf实现这样的风格是很简单的,完全像网页设计一样的. (2)winform界面 在 ...
- JAVA SE 803 考试前突击
考试的宗旨仍然是掌握基础知识,不过鉴于Oracle的这个认证考试还有不少的大家来找茬的成份在,所以一定一定要细心为上. 关于抽象类的坑点集合: 抽象类不是必须得有抽象方法,但有抽象方法的类必须是抽 ...
- PlayFramework 1.2.x 在Controller 中识别JSON提交
链接 http://stackoverflow.com/questions/6132892/consuming-json-in-play-framework-controller @Global pu ...