QRcodeJS生成二维码
来源:互联网 发布:js给二维数组赋值 编辑:程序博客网 时间:2024/05/20 05:06
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>
基本用法
获取块,直接调用默认方法(输入生成的字符串即可生成二维码)
<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>
浏览器适配,支持下列
遵循协议
MIT License
0 0
- QRcodeJS生成二维码
- 使用JavaScript生成二维码教程-附qrcodejs中文文档
- java二维码 生成二维码
- 生成二维码、识别二维码
- 扫描二维码+生成二维码
- 生成二维码、自定义二维码
- 生成二维码
- 二维码生成
- 二维码生成
- 生成二维码
- 二维码生成
- 二维码生成
- 生成二维码
- 二维码生成
- 生成二维码
- 二维码--生成
- 生成二维码
- 生成二维码
- Android 网络框架 android-async-http
- 第九周项目4-我的向量类
- Java关键字浅析之final
- 某公司的笔试和面试
- JavaScript设计模式-接口
- QRcodeJS生成二维码
- 数据结构与算法的概念和常用名词
- inline函数
- code-smell-6-发散式变化
- 百度之星IP聚合(水题map&字符处理)
- android中实现自动输入文本效果
- 第九周项目5-方程也是类
- 安卓中的Model-View-Presenter模式介绍
- 线段相交模板