UnknownObject
/
jquery-qrcode
mirror of https://github.com/lrsjng/jquery-qrcode.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Maintenance.

Browse Source
pull/18/head v0.10.1
Lars Jung 11 years ago
parent 2b106ad642
commit 672549f4ac
14 changed files with 4915 additions and 4482 deletions
Show Stats Download Patch File Download Diff File

30
.editorconfig
Unescape Escape View File

@ -0,0 +1,30 @@
# editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 4
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
[package.json]
indent_style = space
indent_size = 2
[.travis.yml]
indent_style = space
indent_size = 2
[*.md]
trim_trailing_whitespace = false
[*.jade]
trim_trailing_whitespace = false

1
.gitignore vendored
Unescape Escape View File

@ -1,4 +1,3 @@
bower_components bower_components
build build
local local

9
README.md
Unescape Escape View File

@ -1,6 +1,6 @@
# jQuery.qrcode # jQuery.qrcode
[![web][web-img]][web] [![GitHub][github-img]][github] [![bower][bower-img]][github] [![license][license-img]][github] [![web][web-img]][web] [![github][github-img]][github] [![bower][bower-img]][github]
jQuery plugin to dynamically generate QR codes. Uses [QR Code Generator][qrcode] (MIT). jQuery plugin to dynamically generate QR codes. Uses [QR Code Generator][qrcode] (MIT).
@ -32,8 +32,9 @@ THE SOFTWARE.
[web]: http://larsjung.de/qrcode/ [web]: http://larsjung.de/qrcode/
[github]: https://github.com/lrsjng/jquery-qrcode [github]: https://github.com/lrsjng/jquery-qrcode
[web-img]: http://img.shields.io/badge/web-larsjung.de/qrcode-a0a060.svg?style=flat [license-img]: http://img.shields.io/badge/license-MIT-a0a060.svg?style=flat-square
[github-img]: http://img.shields.io/badge/GitHub-lrsjng/jquery--qrcode-a0a060.svg?style=flat [web-img]: http://img.shields.io/badge/web-larsjung.de/qrcode-a0a060.svg?style=flat-square
[bower-img]: http://img.shields.io/badge/bower-lrsjng/jquery--qrcode-a0a060.svg?style=flat [github-img]: http://img.shields.io/badge/github-lrsjng/jquery--qrcode-a0a060.svg?style=flat-square
[bower-img]: http://img.shields.io/badge/bower-lrsjng/jquery--qrcode-a0a060.svg?style=flat-square
[qrcode]: https://github.com/kazuhikoarase/qrcode-generator [qrcode]: https://github.com/kazuhikoarase/qrcode-generator

15
bower.json
Unescape Escape View File

@ -1,24 +1,23 @@
{ {
"name": "jquery-qrcode", "name": "jquery-qrcode",
"version": "0.10.0", "version": "0.10.1",
"description": "generate QR codes dynamically", "description": "generate QR codes dynamically",
"homepage": "http://larsjung.de/jquery-qrcode/", "homepage": "http://larsjung.de/jquery-qrcode/",
"authors": [ "authors": [
"Lars Jung <lrsjng@gmail.com> (http://larsjung.de)" "Lars Jung <lrsjng@gmail.com> (http://larsjung.de)"
], ],
"license": "MIT",
"main": "dist/jquery.qrcode.js", "main": "dist/jquery.qrcode.js",
"keywords": [ "license": "MIT",
"jquery", "repository": {
"javascript", "type": "git",
"qrcode" "url": "https://github.com/lrsjng/jquery-qrcode.git"
], },
"ignore": [ "ignore": [
"**/.*", "**/.*",
"bower_components", "bower_components",
"build", "build",
"local", "local",
"makefile.js", "mkrfile.js",
"node_modules", "node_modules",
"src", "src",
"test", "test",

4171
dist/jquery.qrcode.js vendored
View File

File diff suppressed because it is too large Load Diff

4
dist/jquery.qrcode.min.js vendored
View File

File diff suppressed because one or more lines are too long

92
makefile.js
Unescape Escape View File

@ -1,92 +0,0 @@
/*jshint node: true */
'use strict';
module.exports = function (make) {
var path = require('path'),
pkg = require('./package.json'),
$ = make.fQuery,
root = path.resolve(__dirname),
src = path.join(root, 'src'),
dist = path.join(root, 'dist'),
build = path.join(root, 'build');
make.version('=0.11.0');
make.defaults('release');
make.target('clean', [], 'delete build folder').sync(function () {
$.DELETE(build);
$.DELETE(dist);
});
make.target('lint', [], 'lint all JavaScript files with JSHint').sync(function () {
var options = {
// Enforcing Options
bitwise: true,
curly: true,
eqeqeq: true,
forin: true,
latedef: true,
newcap: true,
noempty: true,
plusplus: true,
trailing: true,
undef: true,
// Environments
browser: true
},
global = {
'jQuery': true,
'qrcode': true
};
$(src + ': jquery.qrcode.js, demo/scripts.js').log(-3)
.jshint(options, global);
});
make.target('build', ['clean', 'lint'], 'build all files').sync(function () {
var header = '/* ' + pkg.displayName + ' ' + pkg.version + ' - ' + pkg.homepage + ' - uses //github.com/kazuhikoarase/qrcode-generator (MIT) */\n';
var env = {pkg: pkg};
$(src + ': jquery.qrcode.js')
.includify()
.handlebars(env)
.wrap(header)
.WRITE($.map.p(src, dist))
.WRITE($.map.p(src, build).s('.js', '-' + pkg.version + '.js'))
.uglifyjs()
.wrap(header)
.WRITE($.map.p(src, dist).s('.js', '.min.js'))
.WRITE($.map.p(src, build).s('.js', '-' + pkg.version + '.min.js'));
$(src + ': **, ! *.js')
.handlebars(env)
.WRITE($.map.p(src, build));
$(root + ': *.md')
.handlebars(env)
.WRITE($.map.p(root, build));
});
make.target('release', ['build'], 'create a zipball').async(function (done, fail) {
$(build + ': **').shzip({
target: path.join(build, pkg.name + '-' + pkg.version + '.zip'),
dir: build,
callback: done
});
});
};

87
mkrfile.js
Unescape Escape View File

@ -0,0 +1,87 @@
/*jshint node: true */
'use strict';
module.exports = function (suite) {
var path = require('path');
var root = path.resolve(__dirname);
var src = path.join(root, 'src');
var dist = path.join(root, 'dist');
var build = path.join(root, 'build');
var $ = require('fquery');
$.plugin('fquery-handlebars');
$.plugin('fquery-includeit');
$.plugin('fquery-jshint');
$.plugin('fquery-jszip');
$.plugin('fquery-uglifyjs');
suite.defaults('release');
suite.target('clean', [], 'delete build folder').task(function () {
$([build, dist], {dirs: true}).delete();
});
suite.target('lint', [], 'lint all JavaScript files with JSHint').task(function () {
var options = {
// Enforcing Options
bitwise: true,
curly: true,
eqeqeq: true,
forin: true,
latedef: true,
newcap: true,
noempty: true,
plusplus: true,
trailing: true,
undef: true,
// Environments
browser: true
};
var global = {
'jQuery': true,
'qrcode': true
};
$(src + ': jquery.qrcode.js, demo/scripts.js')
.jshint(options, global);
});
suite.target('release', ['clean', 'lint'], 'build all files and create a zipball').task(function () {
var pkg = require('./package.json');
var header = '/* ' + pkg.displayName + ' ' + pkg.version + ' - ' + pkg.homepage + ' - uses //github.com/kazuhikoarase/qrcode-generator (MIT) */\n';
var target = path.join(build, pkg.name + '-' + pkg.version + '.zip');
var env = {pkg: pkg};
$(src + ': jquery.qrcode.js')
.includeit()
.wrap(header)
.write($.map.p(src, dist), true)
.write($.map.p(src, build).s('.js', '-' + pkg.version + '.js'), true)
.uglifyjs()
.wrap(header)
.write($.map.p(src, dist).s('.js', '.min.js'), true)
.write($.map.p(src, build).s('.js', '-' + pkg.version + '.min.js'), true);
$(src + ': **, ! *.js')
.handlebars(env)
.write($.map.p(src, build), true);
$(root + ': *.md')
.write($.map.p(root, build), true);
$(build + ': **')
.jszip({dir: build})
.write(target, true);
});
};

11
package.json
Unescape Escape View File

@ -1,7 +1,7 @@
{ {
"name": "jquery-qrcode", "name": "jquery-qrcode",
"displayName": "jQuery.qrcode", "displayName": "jQuery.qrcode",
"version": "0.10.0", "version": "0.10.1",
"description": "generate QR codes dynamically", "description": "generate QR codes dynamically",
"homepage": "http://larsjung.de/jquery-qrcode/", "homepage": "http://larsjung.de/jquery-qrcode/",
"bugs": "https://github.com/lrsjng/jquery-qrcode/issues", "bugs": "https://github.com/lrsjng/jquery-qrcode/issues",
@ -10,5 +10,14 @@
"repository": { "repository": {
"type": "git", "type": "git",
"url": "https://github.com/lrsjng/jquery-qrcode.git" "url": "https://github.com/lrsjng/jquery-qrcode.git"
},
"devDependencies": {
"fquery": "~0.12.17",
"fquery-handlebars": "~0.1.0",
"fquery-includeit": "~0.1.1",
"fquery-jshint": "~0.1.0",
"fquery-jszip": "~0.1.0",
"fquery-uglifyjs": "~0.1.3",
"mkr": "~0.3.0"
} }
} }

157
src/demo/index.html
Unescape Escape View File

@ -3,91 +3,88 @@
<html class="no-js no-browser" lang="en"> <html class="no-js no-browser" lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>{{pkg.displayName}} {{pkg.version}} · Demo</title>
<title>{{pkg.displayName}} {{pkg.version}} · Demo</title> <meta name="description" content="demo for the jQuery plug in jQuery.qrcode (http://larsjung.de/qrcode/)">
<meta name="description" content="demo for the jQuery plug in jQuery.qrcode (http://larsjung.de/qrcode/)"> <meta name="author" content="Lars Jung">
<meta name="author" content="Lars Jung"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width"> <link rel="author" href="http://plus.google.com/106403733398479106535">
<link rel="author" href="http://plus.google.com/106403733398479106535"> <link rel="shortcut icon" href="dummy.png" type="image/png">
<link rel="shortcut icon" href="icon-16.ico"> <link rel="apple-touch-icon" href="dummy.png" type="image/png">
<link rel="apple-touch-icon" href="icon-48.png" type="image/png"> <link href='http://fonts.googleapis.com/css?family=Ubuntu:400,700' rel='stylesheet'>
<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,700' rel='stylesheet'> <link href='styles.css' rel='stylesheet'>
<link href='styles.css' rel='stylesheet'> <script src="jquery-1.10.2.js"></script>
<script src="jquery-1.10.2.js"></script> <script src="../jquery.qrcode-{{pkg.version}}.js"></script>
<script src="../jquery.qrcode-{{pkg.version}}.js"></script> <script src="ff-range.js"></script>
<script src="ff-range.js"></script> <script src="scripts.js"></script>
<script src="scripts.js"></script>
</head> </head>
<body> <body>
<div id="container"></div> <div id="container"></div>
<div class="control left"> <div class="control left">
<a id="banner" href="http://larsjung.de/qrcode/">{{pkg.displayName}} {{pkg.version}}</a> <a id="banner" href="http://larsjung.de/qrcode/">{{pkg.displayName}} {{pkg.version}}</a>
<hr/> <hr/>
<label for="render">RENDER MODE</label> <label for="render">RENDER MODE</label>
<select id="render"> <select id="render">
<option value="canvas" selected="selected">Canvas</option> <option value="canvas" selected="selected">Canvas</option>
<option value="image">Image</option> <option value="image">Image</option>
<option value="div">DIV</option> <option value="div">DIV</option>
</select> </select>
<hr/> <hr/>
<label for="size">SIZE:</label> <label for="size">SIZE:</label>
<input id="size" type="range" value="400" min="100" max="1000" step="50" /> <input id="size" type="range" value="400" min="100" max="1000" step="50" />
<label for="fill">FILL</label> <label for="fill">FILL</label>
<input id="fill" type="color" value="#333333" /> <input id="fill" type="color" value="#333333" />
<label for="background">BACKGROUND</label> <label for="background">BACKGROUND</label>
<input id="background" type="color" value="#ffffff" /> <input id="background" type="color" value="#ffffff" />
<label for="text">CONTENT</label> <label for="text">CONTENT</label>
<textarea id="text">http://larsjung.de/qrcode/</textarea> <textarea id="text">http://larsjung.de/qrcode/</textarea>
<hr/> <hr/>
<label for="minversion">MIN VERSION:</label> <label for="minversion">MIN VERSION:</label>
<input id="minversion" type="range" value="6" min="1" max="10" step="1" /> <input id="minversion" type="range" value="6" min="1" max="10" step="1" />
<label for="eclevel">ERROR CORRECTION LEVEL</label> <label for="eclevel">ERROR CORRECTION LEVEL</label>
<select id="eclevel"> <select id="eclevel">
<option value="L">L - Low (7%)</option> <option value="L">L - Low (7%)</option>
<option value="M">M - Medium (15%)</option> <option value="M">M - Medium (15%)</option>
<option value="Q">Q - Quartile (25%)</option> <option value="Q">Q - Quartile (25%)</option>
<option value="H" selected="selected">H - High (30%)</option> <option value="H" selected="selected">H - High (30%)</option>
</select> </select>
<label for="quiet">QUIET ZONE:</label> <label for="quiet">QUIET ZONE:</label>
<input id="quiet" type="range" value="1" min="0" max="4" step="1" /> <input id="quiet" type="range" value="1" min="0" max="4" step="1" />
<label for="radius">CORNER RADIUS (not in Opera):</label> <label for="radius">CORNER RADIUS (not in Opera):</label>
<input id="radius" type="range" value="50" min="0" max="50" step="10" /> <input id="radius" type="range" value="50" min="0" max="50" step="10" />
<!-- <hr/> --> </div>
<!-- <a id="download" download="qrcode.png">DOWNLOAD</a> -->
</div>
<div class="control right"> <div class="control right">
<label for="mode">MODE</label> <label for="mode">MODE</label>
<select id="mode"> <select id="mode">
<option value="0">0 - Normal</option> <option value="0">0 - Normal</option>
<option value="1">1 - Label-Strip</option> <option value="1">1 - Label-Strip</option>
<option value="2" selected="selected">2 - Label-Box</option> <option value="2" selected="selected">2 - Label-Box</option>
<option value="3">3 - Image-Strip</option> <option value="3">3 - Image-Strip</option>
<option value="4">4 - Image-Box</option> <option value="4">4 - Image-Box</option>
</select> </select>
<hr/> <hr/>
<label for="msize">SIZE:</label> <label for="msize">SIZE:</label>
<input id="msize" type="range" value="11" min="0" max="40" step="1" /> <input id="msize" type="range" value="11" min="0" max="40" step="1" />
<label for="mposx">POS X:</label> <label for="mposx">POS X:</label>
<input id="mposx" type="range" value="50" min="0" max="100" step="1" /> <input id="mposx" type="range" value="50" min="0" max="100" step="1" />
<label for="mposy">POS Y:</label> <label for="mposy">POS Y:</label>
<input id="mposy" type="range" value="50" min="0" max="100" step="1" /> <input id="mposy" type="range" value="50" min="0" max="100" step="1" />
<hr/> <hr/>
<label for="label">LABEL</label> <label for="label">LABEL</label>
<input id="label" type="text" value="jQuery.qrcode" /> <input id="label" type="text" value="jQuery.qrcode" />
<label for="font">FONT NAME</label> <label for="font">FONT NAME</label>
<input id="font" type="text" value="Ubuntu" /> <input id="font" type="text" value="Ubuntu" />
<label for="fontcolor">FONT COLOR:</label> <label for="fontcolor">FONT COLOR:</label>
<input id="fontcolor" type="color" value="#ff9818" /> <input id="fontcolor" type="color" value="#ff9818" />
<hr/> <hr/>
<label for="image">IMAGE</label> <label for="image">IMAGE</label>
<input id="image" type="file" /> <input id="image" type="file" />
</div> </div>
<img id="img-buffer" src="dummy.png" /> <img id="img-buffer" src="dummy.png" />
</body> </body>
</html> </html>

147
src/demo/scripts.js
Unescape Escape View File

@ -1,103 +1,104 @@
(function () {
'use strict';
(function ($) { var $ = jQuery;
'use strict';
var isOpera = Object.prototype.toString.call(window.opera) === '[object Opera]', var isOpera = Object.prototype.toString.call(window.opera) === '[object Opera]',
guiValuePairs = [ guiValuePairs = [
["size", "px"], ["size", "px"],
["minversion", ""], ["minversion", ""],
["quiet", " modules"], ["quiet", " modules"],
["radius", "%"], ["radius", "%"],
["msize", "%"], ["msize", "%"],
["mposx", "%"], ["mposx", "%"],
["mposy", "%"] ["mposy", "%"]
], ],
updateGui = function () { updateGui = function () {
$.each(guiValuePairs, function (idx, pair) { $.each(guiValuePairs, function (idx, pair) {
var $label = $('label[for="' + pair[0] + '"]'); var $label = $('label[for="' + pair[0] + '"]');
$label.text($label.text().replace(/:.*/, ': ' + $('#' + pair[0]).val() + pair[1])); $label.text($label.text().replace(/:.*/, ': ' + $('#' + pair[0]).val() + pair[1]));
}); });
}, },
updateQrCode = function () { updateQrCode = function () {
var options = { var options = {
render: $("#render").val(), render: $("#render").val(),
ecLevel: $("#eclevel").val(), ecLevel: $("#eclevel").val(),
minVersion: parseInt($("#minversion").val(), 10), minVersion: parseInt($("#minversion").val(), 10),
fill: $("#fill").val(), fill: $("#fill").val(),
background: $("#background").val(), background: $("#background").val(),
// fill: $("#img-buffer")[0], // fill: $("#img-buffer")[0],
text: $("#text").val(), text: $("#text").val(),
size: parseInt($("#size").val(), 10), size: parseInt($("#size").val(), 10),
radius: parseInt($("#radius").val(), 10) * 0.01, radius: parseInt($("#radius").val(), 10) * 0.01,
quiet: parseInt($("#quiet").val(), 10), quiet: parseInt($("#quiet").val(), 10),
mode: parseInt($("#mode").val(), 10), mode: parseInt($("#mode").val(), 10),
mSize: parseInt($("#msize").val(), 10) * 0.01, mSize: parseInt($("#msize").val(), 10) * 0.01,
mPosX: parseInt($("#mposx").val(), 10) * 0.01, mPosX: parseInt($("#mposx").val(), 10) * 0.01,
mPosY: parseInt($("#mposy").val(), 10) * 0.01, mPosY: parseInt($("#mposy").val(), 10) * 0.01,
label: $("#label").val(), label: $("#label").val(),
fontname: $("#font").val(), fontname: $("#font").val(),
fontcolor: $("#fontcolor").val(), fontcolor: $("#fontcolor").val(),
image: $("#img-buffer")[0] image: $("#img-buffer")[0]
}; };
$("#container").empty().qrcode(options); $("#container").empty().qrcode(options);
}, },
update = function () { update = function () {
updateGui(); updateGui();
updateQrCode(); updateQrCode();
}, },
onImageInput = function () { onImageInput = function () {
var input = $("#image")[0]; var input = $("#image")[0];
if (input.files && input.files[0]) { if (input.files && input.files[0]) {
var reader = new FileReader(); var reader = new FileReader();
reader.onload = function (event) { reader.onload = function (event) {
$("#img-buffer").attr("src", event.target.result); $("#img-buffer").attr("src", event.target.result);
$("#mode").val("4"); $("#mode").val("4");
setTimeout(update, 250); setTimeout(update, 250);
}; };
reader.readAsDataURL(input.files[0]); reader.readAsDataURL(input.files[0]);
} }
}, },
download = function (event) { download = function (event) {
var data = $("#container canvas")[0].toDataURL('image/png'); var data = $("#container canvas")[0].toDataURL('image/png');
$("#download").attr("href", data); $("#download").attr("href", data);
}; };
$(function () { $(function () {
if (isOpera) { if (isOpera) {
$('html').addClass('opera'); $('html').addClass('opera');
$('#radius').prop('disabled', true); $('#radius').prop('disabled', true);
} }
$("#download").on("click", download); $("#download").on("click", download);
$("#image").on('change', onImageInput); $("#image").on('change', onImageInput);
$("input, textarea, select").on("input change", update); $("input, textarea, select").on("input change", update);
$(window).load(update); $(window).load(update);
update(); update();
}); });
}(jQuery)); }());

121
src/demo/styles.css
Unescape Escape View File

@ -1,112 +1,111 @@
body { body {
font-family: Ubuntu; font-family: Ubuntu;
margin: 0; margin: 0;
padding: 0; padding: 0;
text-align: center; text-align: center;
background: repeat url("back.png"); background: repeat url("back.png");
} }
#banner { #banner {
display: block; display: block;
text-decoration: none; text-decoration: none;
color: rgb(29, 119, 194); color: rgb(29, 119, 194);
padding: 12px 0 0; padding: 12px 0 0;
text-align: center; text-align: center;
} }
#banner:hover { #banner:hover {
color: #333; color: #333;
} }
#container { #container {
display: inline-block; display: inline-block;
margin: 20px auto; margin: 20px auto;
box-shadow: 0 0 16px rgba(0,0,0,0.5); box-shadow: 0 0 16px rgba(0,0,0,0.5);
} }
#container > * { #container > * {
display: block; display: block;
} }
.control { .control {
position: absolute; position: absolute;
background-color: #f8f8f8; background-color: #f8f8f8;
top: 0; top: 0;
width: 190px; width: 190px;
box-shadow: 0 0 32px rgba(0,0,0,0.5); box-shadow: 0 0 32px rgba(0,0,0,0.5);
overflow: hidden; overflow: hidden;
text-align: left; text-align: left;
} }
.control.left { .control.left {
left: 0; left: 0;
} }
.control.right { .control.right {
right: 0; right: 0;
} }
hr { hr {
margin: 12px 0 0; margin: 12px 0 0;
padding: 0; padding: 0;
border: none; border: none;
height: 1px; height: 1px;
background-color: rgba(0,0,0,0.1); background-color: rgba(0,0,0,0.1);
} }
label { label {
font-size: 10px; font-size: 10px;
color: #bbb; color: #bbb;
padding: 12px 4px 0 4px; padding: 12px 4px 0 4px;
} }
html.opera label[for="radius"] { html.opera label[for="radius"] {
color: #e55; color: #e55;
} }
#download { #download {
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
text-decoration: none; text-decoration: none;
display: block; display: block;
color: #555; color: #555;
background-color: #ddd; background-color: #ddd;
margin: 4px; margin: 4px;
padding: 8px 0; padding: 8px 0;
border: 1px solid #ddd; border: 1px solid #ddd;
cursor: pointer; cursor: pointer;
} }
input, textarea, select { input, textarea, select {
font-family: Ubuntu; font-family: Ubuntu;
display: block; display: block;
background-color: #fff; background-color: #fff;
margin: 2px; margin: 2px;
padding: 0 2px; padding: 0 2px;
border: 1px solid #ddd; border: 1px solid #ddd;
width: 180px; width: 180px;
height: 22px; height: 22px;
} }
#text { #text {
height: 48px; height: 48px;
} }
#img-buffer { #img-buffer {
display: none; display: none;
} }
input[type="range"] { input[type="range"] {
-webkit-appearance: none; -webkit-appearance: none;
cursor: pointer; cursor: pointer;
} }
input::-webkit-slider-thumb { input::-webkit-slider-thumb {
-webkit-appearance: none; -webkit-appearance: none;
width: 16px; width: 16px;
height: 16px; height: 16px;
border-radius: 3px; border-radius: 3px;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #aaa), color-stop(1, #aaa) ); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #aaa), color-stop(1, #aaa) );
} }

924
src/jquery.qrcode.js
Unescape Escape View File

@ -1,469 +1,471 @@
(function ($) { (function () {
'use strict'; 'use strict';
var $ = jQuery;
// Wrapper for the original QR code generator.
var QRCode = function (text, level, version, quiet) { // Wrapper for the original QR code generator.
var QRCode = function (text, level, version, quiet) {
// `qrcode` is the single public function that will be defined by the `QR Code Generator`
// at the end of the file.
var qr = qrcode(version, level);
qr.addData(text);
qr.make();
quiet = quiet || 0;
var qrModuleCount = qr.getModuleCount(),
quietModuleCount = qr.getModuleCount() + 2*quiet,
isDark = function (row, col) {
row -= quiet;
col -= quiet;
if (row < 0 || row >= qrModuleCount || col < 0 || col >= qrModuleCount) {
return false;
}
return qr.isDark(row, col);
},
addBlank = function (l, t, r, b) {
var prevIsDark = this.isDark,
moduleSize = 1 / quietModuleCount;
this.isDark = function (row, col) {
var ml = col * moduleSize,
mt = row * moduleSize,
mr = ml + moduleSize,
mb = mt + moduleSize;
return prevIsDark(row, col) && (l > mr || ml > r || t > mb || mt > b);
};
};
this.text = text;
this.level = level;
this.version = version;
this.moduleCount = quietModuleCount;
this.isDark = isDark;
this.addBlank = addBlank;
},
// Check if canvas is available in the browser (as Modernizr does)
canvasAvailable = (function () {
var elem = document.createElement('canvas');
return !!(elem.getContext && elem.getContext('2d'));
}()),
arcToAvailable = Object.prototype.toString.call(window.opera) !== '[object Opera]',
// Returns a minimal QR code for the given text starting with version `minVersion`.
// Returns `null` if `text` is too long to be encoded in `maxVersion`.
createQRCode = function (text, level, minVersion, maxVersion, quiet) {
minVersion = Math.max(1, minVersion || 1);
maxVersion = Math.min(40, maxVersion || 40);
for (var version = minVersion; version <= maxVersion; version += 1) {
try {
return new QRCode(text, level, version, quiet);
} catch (err) {}
}
},
drawBackgroundLabel = function (qr, context, settings) {
var size = settings.size,
font = "bold " + (settings.mSize * size) + "px " + settings.fontname,
ctx = $('<canvas/>')[0].getContext("2d");
ctx.font = font;
var w = ctx.measureText(settings.label).width,
sh = settings.mSize,
sw = w / size,
sl = (1 - sw) * settings.mPosX,
st = (1 - sh) * settings.mPosY,
sr = sl + sw,
sb = st + sh,
pad = 0.01;
if (settings.mode === 1) {
// Strip
qr.addBlank(0, st - pad, size, sb + pad);
} else {
// Box
qr.addBlank(sl - pad, st - pad, sr + pad, sb + pad);
}
context.fillStyle = settings.fontcolor;
context.font = font;
context.fillText(settings.label, sl*size, st*size + 0.75 * settings.mSize * size);
},
drawBackgroundImage = function (qr, context, settings) {
var size = settings.size,
w = settings.image.naturalWidth || 1,
h = settings.image.naturalHeight || 1,
sh = settings.mSize,
sw = sh * w / h,
sl = (1 - sw) * settings.mPosX,
st = (1 - sh) * settings.mPosY,
sr = sl + sw,
sb = st + sh,
pad = 0.01;
if (settings.mode === 3) {
// Strip
qr.addBlank(0, st - pad, size, sb + pad);
} else {
// Box
qr.addBlank(sl - pad, st - pad, sr + pad, sb + pad);
}
context.drawImage(settings.image, sl*size, st*size, sw*size, sh*size);
},
drawBackground = function (qr, context, settings) {
if ($(settings.background).is('img')) {
context.drawImage(settings.background, 0, 0, settings.size, settings.size);
} else if (settings.background) {
context.fillStyle = settings.background;
context.fillRect(settings.left, settings.top, settings.size, settings.size);
}
var mode = settings.mode;
if (mode === 1 || mode === 2) {
drawBackgroundLabel(qr, context, settings);
} else if (mode === 3 || mode === 4) {
drawBackgroundImage(qr, context, settings);
}
},
drawModuleDefault = function (qr, context, settings, left, top, width, row, col) {
if (qr.isDark(row, col)) {
context.rect(left, top, width, width);
}
},
drawModuleRoundedDark = function (ctx, l, t, r, b, rad, nw, ne, se, sw) {
if (nw) {
ctx.moveTo(l + rad, t);
} else {
ctx.moveTo(l, t);
}
if (ne) {
ctx.lineTo(r - rad, t);
ctx.arcTo(r, t, r, b, rad);
} else {
ctx.lineTo(r, t);
}
if (se) {
ctx.lineTo(r, b - rad);
ctx.arcTo(r, b, l, b, rad);
} else {
ctx.lineTo(r, b);
}
if (sw) {
ctx.lineTo(l + rad, b);
ctx.arcTo(l, b, l, t, rad);
} else {
ctx.lineTo(l, b);
}
if (nw) {
ctx.lineTo(l, t + rad);
ctx.arcTo(l, t, r, t, rad);
} else {
ctx.lineTo(l, t);
}
},
drawModuleRoundendLight = function (ctx, l, t, r, b, rad, nw, ne, se, sw) {
if (nw) {
ctx.moveTo(l + rad, t);
ctx.lineTo(l, t);
ctx.lineTo(l, t + rad);
ctx.arcTo(l, t, l + rad, t, rad);
}
if (ne) {
ctx.moveTo(r - rad, t);
ctx.lineTo(r, t);
ctx.lineTo(r, t + rad);
ctx.arcTo(r, t, r - rad, t, rad);
}
if (se) {
ctx.moveTo(r - rad, b);
ctx.lineTo(r, b);
ctx.lineTo(r, b - rad);
ctx.arcTo(r, b, r - rad, b, rad);
}
if (sw) {
ctx.moveTo(l + rad, b);
ctx.lineTo(l, b);
ctx.lineTo(l, b - rad);
ctx.arcTo(l, b, l + rad, b, rad);
}
},
drawModuleRounded = function (qr, context, settings, left, top, width, row, col) {
var isDark = qr.isDark,
right = left + width,
bottom = top + width,
radius = settings.radius * width,
rowT = row - 1,
rowB = row + 1,
colL = col - 1,
colR = col + 1,
center = isDark(row, col),
northwest = isDark(rowT, colL),
north = isDark(rowT, col),
northeast = isDark(rowT, colR),
east = isDark(row, colR),
southeast = isDark(rowB, colR),
south = isDark(rowB, col),
southwest = isDark(rowB, colL),
west = isDark(row, colL);
if (center) {
drawModuleRoundedDark(context, left, top, right, bottom, radius, !north && !west, !north && !east, !south && !east, !south && !west);
} else {
drawModuleRoundendLight(context, left, top, right, bottom, radius, north && west && northwest, north && east && northeast, south && east && southeast, south && west && southwest);
}
},
drawModules = function (qr, context, settings) {
var moduleCount = qr.moduleCount,
moduleSize = settings.size / moduleCount,
fn = drawModuleDefault,
row, col;
if (arcToAvailable && settings.radius > 0 && settings.radius <= 0.5) {
fn = drawModuleRounded;
}
context.beginPath();
for (row = 0; row < moduleCount; row += 1) {
for (col = 0; col < moduleCount; col += 1) {
var l = settings.left + col * moduleSize,
t = settings.top + row * moduleSize,
w = moduleSize;
fn(qr, context, settings, l, t, w, row, col);
}
}
if ($(settings.fill).is('img')) {
context.strokeStyle = 'rgba(0,0,0,0.5)';
context.lineWidth = 2;
context.stroke();
var prev = context.globalCompositeOperation;
context.globalCompositeOperation = "destination-out";
context.fill();
context.globalCompositeOperation = prev;
context.clip();
context.drawImage(settings.fill, 0, 0, settings.size, settings.size);
context.restore();
} else {
context.fillStyle = settings.fill;
context.fill();
}
},
// Draws QR code to the given `canvas` and returns it.
drawOnCanvas = function (canvas, settings) {
var qr = createQRCode(settings.text, settings.ecLevel, settings.minVersion, settings.maxVersion, settings.quiet);
if (!qr) {
return null;
}
var $canvas = $(canvas).data('qrcode', qr),
context = $canvas[0].getContext('2d');
drawBackground(qr, context, settings);
drawModules(qr, context, settings);
return $canvas;
},
// Returns a `canvas` element representing the QR code for the given settings.
createCanvas = function (settings) {
var $canvas = $('<canvas/>').attr('width', settings.size).attr('height', settings.size);
return drawOnCanvas($canvas, settings);
},
// Returns an `image` element representing the QR code for the given settings.
createImage = function (settings) {
return $('<img/>').attr('src', createCanvas(settings)[0].toDataURL('image/png'));
},
// Returns a `div` element representing the QR code for the given settings.
createDiv = function (settings) {
var qr = createQRCode(settings.text, settings.ecLevel, settings.minVersion, settings.maxVersion, settings.quiet);
if (!qr) {
return null;
}
// some shortcuts to improve compression
var settings_size = settings.size,
settings_bgColor = settings.background,
math_floor = Math.floor,
moduleCount = qr.moduleCount,
moduleSize = math_floor(settings_size / moduleCount),
offset = math_floor(0.5 * (settings_size - moduleSize * moduleCount)),
row, col,
containerCSS = {
position: 'relative',
left: 0,
top: 0,
padding: 0,
margin: 0,
width: settings_size,
height: settings_size
},
darkCSS = {
position: 'absolute',
padding: 0,
margin: 0,
width: moduleSize,
height: moduleSize,
'background-color': settings.fill
},
$div = $('<div/>').data('qrcode', qr).css(containerCSS);
if (settings_bgColor) {
$div.css('background-color', settings_bgColor);
}
for (row = 0; row < moduleCount; row += 1) {
for (col = 0; col < moduleCount; col += 1) {
if (qr.isDark(row, col)) {
$('<div/>')
.css(darkCSS)
.css({
left: offset + col * moduleSize,
top: offset + row * moduleSize
})
.appendTo($div);
}
}
}
return $div;
},
createHTML = function (settings) {
if (canvasAvailable && settings.render === 'canvas') {
return createCanvas(settings);
} else if (canvasAvailable && settings.render === 'image') {
return createImage(settings);
}
// `qrcode` is the single public function that will be defined by the `QR Code Generator` return createDiv(settings);
// at the end of the file. },
var qr = qrcode(version, level);
qr.addData(text);
qr.make();
quiet = quiet || 0;
var qrModuleCount = qr.getModuleCount(),
quietModuleCount = qr.getModuleCount() + 2*quiet,
isDark = function (row, col) {
row -= quiet;
col -= quiet;
if (row < 0 || row >= qrModuleCount || col < 0 || col >= qrModuleCount) {
return false;
}
return qr.isDark(row, col);
},
addBlank = function (l, t, r, b) {
var prevIsDark = this.isDark,
moduleSize = 1 / quietModuleCount;
this.isDark = function (row, col) {
var ml = col * moduleSize,
mt = row * moduleSize,
mr = ml + moduleSize,
mb = mt + moduleSize;
return prevIsDark(row, col) && (l > mr || ml > r || t > mb || mt > b);
};
};
this.text = text;
this.level = level;
this.version = version;
this.moduleCount = quietModuleCount;
this.isDark = isDark;
this.addBlank = addBlank;
},
// Check if canvas is available in the browser (as Modernizr does)
canvasAvailable = (function () {
var elem = document.createElement('canvas');
return !!(elem.getContext && elem.getContext('2d'));
}()),
arcToAvailable = Object.prototype.toString.call(window.opera) !== '[object Opera]',
// Returns a minimal QR code for the given text starting with version `minVersion`.
// Returns `null` if `text` is too long to be encoded in `maxVersion`.
createQRCode = function (text, level, minVersion, maxVersion, quiet) {
minVersion = Math.max(1, minVersion || 1);
maxVersion = Math.min(40, maxVersion || 40);
for (var version = minVersion; version <= maxVersion; version += 1) {
try {
return new QRCode(text, level, version, quiet);
} catch (err) {}
}
},
drawBackgroundLabel = function (qr, context, settings) {
var size = settings.size,
font = "bold " + (settings.mSize * size) + "px " + settings.fontname,
ctx = $('<canvas/>')[0].getContext("2d");
ctx.font = font;
var w = ctx.measureText(settings.label).width,
sh = settings.mSize,
sw = w / size,
sl = (1 - sw) * settings.mPosX,
st = (1 - sh) * settings.mPosY,
sr = sl + sw,
sb = st + sh,
pad = 0.01;
if (settings.mode === 1) {
// Strip
qr.addBlank(0, st - pad, size, sb + pad);
} else {
// Box
qr.addBlank(sl - pad, st - pad, sr + pad, sb + pad);
}
context.fillStyle = settings.fontcolor;
context.font = font;
context.fillText(settings.label, sl*size, st*size + 0.75 * settings.mSize * size);
},
drawBackgroundImage = function (qr, context, settings) {
var size = settings.size,
w = settings.image.naturalWidth || 1,
h = settings.image.naturalHeight || 1,
sh = settings.mSize,
sw = sh * w / h,
sl = (1 - sw) * settings.mPosX,
st = (1 - sh) * settings.mPosY,
sr = sl + sw,
sb = st + sh,
pad = 0.01;
if (settings.mode === 3) {
// Strip
qr.addBlank(0, st - pad, size, sb + pad);
} else {
// Box
qr.addBlank(sl - pad, st - pad, sr + pad, sb + pad);
}
context.drawImage(settings.image, sl*size, st*size, sw*size, sh*size);
},
drawBackground = function (qr, context, settings) {
if ($(settings.background).is('img')) {
context.drawImage(settings.background, 0, 0, settings.size, settings.size);
} else if (settings.background) {
context.fillStyle = settings.background;
context.fillRect(settings.left, settings.top, settings.size, settings.size);
}
var mode = settings.mode;
if (mode === 1 || mode === 2) {
drawBackgroundLabel(qr, context, settings);
} else if (mode === 3 || mode === 4) {
drawBackgroundImage(qr, context, settings);
}
},
drawModuleDefault = function (qr, context, settings, left, top, width, row, col) {
if (qr.isDark(row, col)) {
context.rect(left, top, width, width);
}
},
drawModuleRoundedDark = function (ctx, l, t, r, b, rad, nw, ne, se, sw) {
if (nw) {
ctx.moveTo(l + rad, t);
} else {
ctx.moveTo(l, t);
}
if (ne) {
ctx.lineTo(r - rad, t);
ctx.arcTo(r, t, r, b, rad);
} else {
ctx.lineTo(r, t);
}
if (se) {
ctx.lineTo(r, b - rad);
ctx.arcTo(r, b, l, b, rad);
} else {
ctx.lineTo(r, b);
}
if (sw) {
ctx.lineTo(l + rad, b);
ctx.arcTo(l, b, l, t, rad);
} else {
ctx.lineTo(l, b);
}
if (nw) {
ctx.lineTo(l, t + rad);
ctx.arcTo(l, t, r, t, rad);
} else {
ctx.lineTo(l, t);
}
},
drawModuleRoundendLight = function (ctx, l, t, r, b, rad, nw, ne, se, sw) {
if (nw) {
ctx.moveTo(l + rad, t);
ctx.lineTo(l, t);
ctx.lineTo(l, t + rad);
ctx.arcTo(l, t, l + rad, t, rad);
}
if (ne) {
ctx.moveTo(r - rad, t);
ctx.lineTo(r, t);
ctx.lineTo(r, t + rad);
ctx.arcTo(r, t, r - rad, t, rad);
}
if (se) {
ctx.moveTo(r - rad, b);
ctx.lineTo(r, b);
ctx.lineTo(r, b - rad);
ctx.arcTo(r, b, r - rad, b, rad);
}
if (sw) {
ctx.moveTo(l + rad, b);
ctx.lineTo(l, b);
ctx.lineTo(l, b - rad);
ctx.arcTo(l, b, l + rad, b, rad);
}
},
drawModuleRounded = function (qr, context, settings, left, top, width, row, col) {
var isDark = qr.isDark,
right = left + width,
bottom = top + width,
radius = settings.radius * width,
rowT = row - 1,
rowB = row + 1,
colL = col - 1,
colR = col + 1,
center = isDark(row, col),
northwest = isDark(rowT, colL),
north = isDark(rowT, col),
northeast = isDark(rowT, colR),
east = isDark(row, colR),
southeast = isDark(rowB, colR),
south = isDark(rowB, col),
southwest = isDark(rowB, colL),
west = isDark(row, colL);
if (center) {
drawModuleRoundedDark(context, left, top, right, bottom, radius, !north && !west, !north && !east, !south && !east, !south && !west);
} else {
drawModuleRoundendLight(context, left, top, right, bottom, radius, north && west && northwest, north && east && northeast, south && east && southeast, south && west && southwest);
}
},
drawModules = function (qr, context, settings) {
var moduleCount = qr.moduleCount,
moduleSize = settings.size / moduleCount,
fn = drawModuleDefault,
row, col;
if (arcToAvailable && settings.radius > 0 && settings.radius <= 0.5) {
fn = drawModuleRounded;
}
context.beginPath();
for (row = 0; row < moduleCount; row += 1) {
for (col = 0; col < moduleCount; col += 1) {
var l = settings.left + col * moduleSize,
t = settings.top + row * moduleSize,
w = moduleSize;
fn(qr, context, settings, l, t, w, row, col);
}
}
if ($(settings.fill).is('img')) {
context.strokeStyle = 'rgba(0,0,0,0.5)';
context.lineWidth = 2;
context.stroke();
var prev = context.globalCompositeOperation;
context.globalCompositeOperation = "destination-out";
context.fill();
context.globalCompositeOperation = prev;
context.clip();
context.drawImage(settings.fill, 0, 0, settings.size, settings.size);
context.restore();
} else {
context.fillStyle = settings.fill;
context.fill();
}
},
// Draws QR code to the given `canvas` and returns it.
drawOnCanvas = function (canvas, settings) {
var qr = createQRCode(settings.text, settings.ecLevel, settings.minVersion, settings.maxVersion, settings.quiet);
if (!qr) {
return null;
}
var $canvas = $(canvas).data('qrcode', qr),
context = $canvas[0].getContext('2d');
drawBackground(qr, context, settings);
drawModules(qr, context, settings);
return $canvas;
},
// Returns a `canvas` element representing the QR code for the given settings.
createCanvas = function (settings) {
var $canvas = $('<canvas/>').attr('width', settings.size).attr('height', settings.size);
return drawOnCanvas($canvas, settings);
},
// Returns an `image` element representing the QR code for the given settings.
createImage = function (settings) {
return $('<img/>').attr('src', createCanvas(settings)[0].toDataURL('image/png'));
},
// Returns a `div` element representing the QR code for the given settings.
createDiv = function (settings) {
var qr = createQRCode(settings.text, settings.ecLevel, settings.minVersion, settings.maxVersion, settings.quiet);
if (!qr) {
return null;
}
// some shortcuts to improve compression
var settings_size = settings.size,
settings_bgColor = settings.background,
math_floor = Math.floor,
moduleCount = qr.moduleCount,
moduleSize = math_floor(settings_size / moduleCount),
offset = math_floor(0.5 * (settings_size - moduleSize * moduleCount)),
row, col,
containerCSS = {
position: 'relative',
left: 0,
top: 0,
padding: 0,
margin: 0,
width: settings_size,
height: settings_size
},
darkCSS = {
position: 'absolute',
padding: 0,
margin: 0,
width: moduleSize,
height: moduleSize,
'background-color': settings.fill
},
$div = $('<div/>').data('qrcode', qr).css(containerCSS);
if (settings_bgColor) {
$div.css('background-color', settings_bgColor);
}
for (row = 0; row < moduleCount; row += 1) {
for (col = 0; col < moduleCount; col += 1) {
if (qr.isDark(row, col)) {
$('<div/>')
.css(darkCSS)
.css({
left: offset + col * moduleSize,
top: offset + row * moduleSize
})
.appendTo($div);
}
}
}
return $div;
},
createHTML = function (settings) {
if (canvasAvailable && settings.render === 'canvas') {
return createCanvas(settings);
} else if (canvasAvailable && settings.render === 'image') {
return createImage(settings);
}
return createDiv(settings);
},
// Plugin
// ======
// Default settings
// ----------------
defaults = {
// render method: `'canvas'`, `'image'` or `'div'` // Plugin
render: 'canvas', // ======
// version range somewhere in 1 .. 40 // Default settings
minVersion: 1, // ----------------
maxVersion: 40, defaults = {
// error correction level: `'L'`, `'M'`, `'Q'` or `'H'`
ecLevel: 'L',
// offset in pixel if drawn onto existing canvas
left: 0,
top: 0,
// size in pixel
size: 200,
// code color or image element
fill: '#000',
// background color or image element, `null` for transparent background
background: null,
// content
text: 'no text',
// corner radius relative to module width: 0.0 .. 0.5
radius: 0,
// quiet zone in modules
quiet: 0,
// modes
// 0: normal
// 1: label strip
// 2: label box
// 3: image strip
// 4: image box
mode: 0,
mSize: 0.1,
mPosX: 0.5,
mPosY: 0.5,
label: 'no label',
fontname: 'sans',
fontcolor: '#000',
image: null
};
// Register the plugin
// -------------------
$.fn.qrcode = function(options) {
var settings = $.extend({}, defaults, options); // render method: `'canvas'`, `'image'` or `'div'`
render: 'canvas',
return this.each(function () { // version range somewhere in 1 .. 40
minVersion: 1,
maxVersion: 40,
// error correction level: `'L'`, `'M'`, `'Q'` or `'H'`
ecLevel: 'L',
// offset in pixel if drawn onto existing canvas
left: 0,
top: 0,
// size in pixel
size: 200,
// code color or image element
fill: '#000',
// background color or image element, `null` for transparent background
background: null,
// content
text: 'no text',
// corner radius relative to module width: 0.0 .. 0.5
radius: 0,
// quiet zone in modules
quiet: 0,
// modes
// 0: normal
// 1: label strip
// 2: label box
// 3: image strip
// 4: image box
mode: 0,
mSize: 0.1,
mPosX: 0.5,
mPosY: 0.5,
label: 'no label',
fontname: 'sans',
fontcolor: '#000',
image: null
};
if (this.nodeName.toLowerCase() === 'canvas') { // Register the plugin
drawOnCanvas(this, settings); // -------------------
} else { $.fn.qrcode = function(options) {
$(this).append(createHTML(settings));
}
});
};
// jQuery.qrcode plug in code ends here var settings = $.extend({}, defaults, options);
// QR Code Generator return this.each(function () {
// =================
// @include "qrcode.js"
}(jQuery)); if (this.nodeName.toLowerCase() === 'canvas') {
drawOnCanvas(this, settings);
} else {
$(this).append(createHTML(settings));
}
});
};
// jQuery.qrcode plug in code ends here
// QR Code Generator
// =================
// @include "qrcode.js"
}());

3628
src/qrcode.js
View File

File diff suppressed because it is too large Load Diff
Write Preview
Loading…
Cancel
Save