mirror of
https://github.com/lrsjng/jquery-qrcode.git
synced 2026-08-12 20:01:55 +08:00
Maintenance.
This commit is contained in:
Lars Jung
@@ -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,4 +1,3 @@
|
||||
|
||||
bower_components
|
||||
build
|
||||
local
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
# 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).
|
||||
|
||||
@@ -32,8 +32,9 @@ THE SOFTWARE.
|
||||
[web]: http://larsjung.de/qrcode/
|
||||
[github]: https://github.com/lrsjng/jquery-qrcode
|
||||
|
||||
[web-img]: http://img.shields.io/badge/web-larsjung.de/qrcode-a0a060.svg?style=flat
|
||||
[github-img]: http://img.shields.io/badge/GitHub-lrsjng/jquery--qrcode-a0a060.svg?style=flat
|
||||
[bower-img]: http://img.shields.io/badge/bower-lrsjng/jquery--qrcode-a0a060.svg?style=flat
|
||||
[license-img]: http://img.shields.io/badge/license-MIT-a0a060.svg?style=flat-square
|
||||
[web-img]: http://img.shields.io/badge/web-larsjung.de/qrcode-a0a060.svg?style=flat-square
|
||||
[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
|
||||
|
||||
+7
-8
@@ -1,24 +1,23 @@
|
||||
{
|
||||
"name": "jquery-qrcode",
|
||||
"version": "0.10.0",
|
||||
"version": "0.10.1",
|
||||
"description": "generate QR codes dynamically",
|
||||
"homepage": "http://larsjung.de/jquery-qrcode/",
|
||||
"authors": [
|
||||
"Lars Jung <lrsjng@gmail.com> (http://larsjung.de)"
|
||||
],
|
||||
"license": "MIT",
|
||||
"main": "dist/jquery.qrcode.js",
|
||||
"keywords": [
|
||||
"jquery",
|
||||
"javascript",
|
||||
"qrcode"
|
||||
],
|
||||
"license": "MIT",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/lrsjng/jquery-qrcode.git"
|
||||
},
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"bower_components",
|
||||
"build",
|
||||
"local",
|
||||
"makefile.js",
|
||||
"mkrfile.js",
|
||||
"node_modules",
|
||||
"src",
|
||||
"test",
|
||||
|
||||
Vendored
+2286
-1885
File diff suppressed because it is too large
Load Diff
Vendored
+2
-2
File diff suppressed because one or more lines are too long
-92
@@ -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
@@ -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);
|
||||
});
|
||||
};
|
||||
+10
-1
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "jquery-qrcode",
|
||||
"displayName": "jQuery.qrcode",
|
||||
"version": "0.10.0",
|
||||
"version": "0.10.1",
|
||||
"description": "generate QR codes dynamically",
|
||||
"homepage": "http://larsjung.de/jquery-qrcode/",
|
||||
"bugs": "https://github.com/lrsjng/jquery-qrcode/issues",
|
||||
@@ -10,5 +10,14 @@
|
||||
"repository": {
|
||||
"type": "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"
|
||||
}
|
||||
}
|
||||
|
||||
+76
-79
@@ -3,91 +3,88 @@
|
||||
<html class="no-js no-browser" lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<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="author" content="Lars Jung">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<link rel="author" href="http://plus.google.com/106403733398479106535">
|
||||
<link rel="shortcut icon" href="icon-16.ico">
|
||||
<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='styles.css' rel='stylesheet'>
|
||||
<script src="jquery-1.10.2.js"></script>
|
||||
<script src="../jquery.qrcode-{{pkg.version}}.js"></script>
|
||||
<script src="ff-range.js"></script>
|
||||
<script src="scripts.js"></script>
|
||||
<meta charset="utf-8">
|
||||
<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="author" content="Lars Jung">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="author" href="http://plus.google.com/106403733398479106535">
|
||||
<link rel="shortcut icon" href="dummy.png" type="image/png">
|
||||
<link rel="apple-touch-icon" href="dummy.png" type="image/png">
|
||||
<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,700' rel='stylesheet'>
|
||||
<link href='styles.css' rel='stylesheet'>
|
||||
<script src="jquery-1.10.2.js"></script>
|
||||
<script src="../jquery.qrcode-{{pkg.version}}.js"></script>
|
||||
<script src="ff-range.js"></script>
|
||||
<script src="scripts.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="container"></div>
|
||||
<div id="container"></div>
|
||||
|
||||
<div class="control left">
|
||||
<a id="banner" href="http://larsjung.de/qrcode/">{{pkg.displayName}} {{pkg.version}}</a>
|
||||
<hr/>
|
||||
<label for="render">RENDER MODE</label>
|
||||
<select id="render">
|
||||
<option value="canvas" selected="selected">Canvas</option>
|
||||
<option value="image">Image</option>
|
||||
<option value="div">DIV</option>
|
||||
</select>
|
||||
<hr/>
|
||||
<label for="size">SIZE:</label>
|
||||
<input id="size" type="range" value="400" min="100" max="1000" step="50" />
|
||||
<label for="fill">FILL</label>
|
||||
<input id="fill" type="color" value="#333333" />
|
||||
<label for="background">BACKGROUND</label>
|
||||
<input id="background" type="color" value="#ffffff" />
|
||||
<label for="text">CONTENT</label>
|
||||
<textarea id="text">http://larsjung.de/qrcode/</textarea>
|
||||
<hr/>
|
||||
<label for="minversion">MIN VERSION:</label>
|
||||
<input id="minversion" type="range" value="6" min="1" max="10" step="1" />
|
||||
<label for="eclevel">ERROR CORRECTION LEVEL</label>
|
||||
<select id="eclevel">
|
||||
<option value="L">L - Low (7%)</option>
|
||||
<option value="M">M - Medium (15%)</option>
|
||||
<option value="Q">Q - Quartile (25%)</option>
|
||||
<option value="H" selected="selected">H - High (30%)</option>
|
||||
</select>
|
||||
<label for="quiet">QUIET ZONE:</label>
|
||||
<input id="quiet" type="range" value="1" min="0" max="4" step="1" />
|
||||
<label for="radius">CORNER RADIUS (not in Opera):</label>
|
||||
<input id="radius" type="range" value="50" min="0" max="50" step="10" />
|
||||
<!-- <hr/> -->
|
||||
<!-- <a id="download" download="qrcode.png">DOWNLOAD</a> -->
|
||||
</div>
|
||||
<div class="control left">
|
||||
<a id="banner" href="http://larsjung.de/qrcode/">{{pkg.displayName}} {{pkg.version}}</a>
|
||||
<hr/>
|
||||
<label for="render">RENDER MODE</label>
|
||||
<select id="render">
|
||||
<option value="canvas" selected="selected">Canvas</option>
|
||||
<option value="image">Image</option>
|
||||
<option value="div">DIV</option>
|
||||
</select>
|
||||
<hr/>
|
||||
<label for="size">SIZE:</label>
|
||||
<input id="size" type="range" value="400" min="100" max="1000" step="50" />
|
||||
<label for="fill">FILL</label>
|
||||
<input id="fill" type="color" value="#333333" />
|
||||
<label for="background">BACKGROUND</label>
|
||||
<input id="background" type="color" value="#ffffff" />
|
||||
<label for="text">CONTENT</label>
|
||||
<textarea id="text">http://larsjung.de/qrcode/</textarea>
|
||||
<hr/>
|
||||
<label for="minversion">MIN VERSION:</label>
|
||||
<input id="minversion" type="range" value="6" min="1" max="10" step="1" />
|
||||
<label for="eclevel">ERROR CORRECTION LEVEL</label>
|
||||
<select id="eclevel">
|
||||
<option value="L">L - Low (7%)</option>
|
||||
<option value="M">M - Medium (15%)</option>
|
||||
<option value="Q">Q - Quartile (25%)</option>
|
||||
<option value="H" selected="selected">H - High (30%)</option>
|
||||
</select>
|
||||
<label for="quiet">QUIET ZONE:</label>
|
||||
<input id="quiet" type="range" value="1" min="0" max="4" step="1" />
|
||||
<label for="radius">CORNER RADIUS (not in Opera):</label>
|
||||
<input id="radius" type="range" value="50" min="0" max="50" step="10" />
|
||||
</div>
|
||||
|
||||
<div class="control right">
|
||||
<label for="mode">MODE</label>
|
||||
<select id="mode">
|
||||
<option value="0">0 - Normal</option>
|
||||
<option value="1">1 - Label-Strip</option>
|
||||
<option value="2" selected="selected">2 - Label-Box</option>
|
||||
<option value="3">3 - Image-Strip</option>
|
||||
<option value="4">4 - Image-Box</option>
|
||||
</select>
|
||||
<hr/>
|
||||
<label for="msize">SIZE:</label>
|
||||
<input id="msize" type="range" value="11" min="0" max="40" step="1" />
|
||||
<label for="mposx">POS X:</label>
|
||||
<input id="mposx" type="range" value="50" min="0" max="100" step="1" />
|
||||
<label for="mposy">POS Y:</label>
|
||||
<input id="mposy" type="range" value="50" min="0" max="100" step="1" />
|
||||
<hr/>
|
||||
<label for="label">LABEL</label>
|
||||
<input id="label" type="text" value="jQuery.qrcode" />
|
||||
<label for="font">FONT NAME</label>
|
||||
<input id="font" type="text" value="Ubuntu" />
|
||||
<label for="fontcolor">FONT COLOR:</label>
|
||||
<input id="fontcolor" type="color" value="#ff9818" />
|
||||
<hr/>
|
||||
<label for="image">IMAGE</label>
|
||||
<input id="image" type="file" />
|
||||
</div>
|
||||
<div class="control right">
|
||||
<label for="mode">MODE</label>
|
||||
<select id="mode">
|
||||
<option value="0">0 - Normal</option>
|
||||
<option value="1">1 - Label-Strip</option>
|
||||
<option value="2" selected="selected">2 - Label-Box</option>
|
||||
<option value="3">3 - Image-Strip</option>
|
||||
<option value="4">4 - Image-Box</option>
|
||||
</select>
|
||||
<hr/>
|
||||
<label for="msize">SIZE:</label>
|
||||
<input id="msize" type="range" value="11" min="0" max="40" step="1" />
|
||||
<label for="mposx">POS X:</label>
|
||||
<input id="mposx" type="range" value="50" min="0" max="100" step="1" />
|
||||
<label for="mposy">POS Y:</label>
|
||||
<input id="mposy" type="range" value="50" min="0" max="100" step="1" />
|
||||
<hr/>
|
||||
<label for="label">LABEL</label>
|
||||
<input id="label" type="text" value="jQuery.qrcode" />
|
||||
<label for="font">FONT NAME</label>
|
||||
<input id="font" type="text" value="Ubuntu" />
|
||||
<label for="fontcolor">FONT COLOR:</label>
|
||||
<input id="fontcolor" type="color" value="#ff9818" />
|
||||
<hr/>
|
||||
<label for="image">IMAGE</label>
|
||||
<input id="image" type="file" />
|
||||
</div>
|
||||
|
||||
<img id="img-buffer" src="dummy.png" />
|
||||
<img id="img-buffer" src="dummy.png" />
|
||||
</body>
|
||||
|
||||
</html>
|
||||
+74
-73
@@ -1,103 +1,104 @@
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
(function ($) {
|
||||
'use strict';
|
||||
var $ = jQuery;
|
||||
|
||||
var isOpera = Object.prototype.toString.call(window.opera) === '[object Opera]',
|
||||
var isOpera = Object.prototype.toString.call(window.opera) === '[object Opera]',
|
||||
|
||||
guiValuePairs = [
|
||||
["size", "px"],
|
||||
["minversion", ""],
|
||||
["quiet", " modules"],
|
||||
["radius", "%"],
|
||||
["msize", "%"],
|
||||
["mposx", "%"],
|
||||
["mposy", "%"]
|
||||
],
|
||||
guiValuePairs = [
|
||||
["size", "px"],
|
||||
["minversion", ""],
|
||||
["quiet", " modules"],
|
||||
["radius", "%"],
|
||||
["msize", "%"],
|
||||
["mposx", "%"],
|
||||
["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 = {
|
||||
render: $("#render").val(),
|
||||
ecLevel: $("#eclevel").val(),
|
||||
minVersion: parseInt($("#minversion").val(), 10),
|
||||
var options = {
|
||||
render: $("#render").val(),
|
||||
ecLevel: $("#eclevel").val(),
|
||||
minVersion: parseInt($("#minversion").val(), 10),
|
||||
|
||||
fill: $("#fill").val(),
|
||||
background: $("#background").val(),
|
||||
// fill: $("#img-buffer")[0],
|
||||
fill: $("#fill").val(),
|
||||
background: $("#background").val(),
|
||||
// fill: $("#img-buffer")[0],
|
||||
|
||||
text: $("#text").val(),
|
||||
size: parseInt($("#size").val(), 10),
|
||||
radius: parseInt($("#radius").val(), 10) * 0.01,
|
||||
quiet: parseInt($("#quiet").val(), 10),
|
||||
text: $("#text").val(),
|
||||
size: parseInt($("#size").val(), 10),
|
||||
radius: parseInt($("#radius").val(), 10) * 0.01,
|
||||
quiet: parseInt($("#quiet").val(), 10),
|
||||
|
||||
mode: parseInt($("#mode").val(), 10),
|
||||
mode: parseInt($("#mode").val(), 10),
|
||||
|
||||
mSize: parseInt($("#msize").val(), 10) * 0.01,
|
||||
mPosX: parseInt($("#mposx").val(), 10) * 0.01,
|
||||
mPosY: parseInt($("#mposy").val(), 10) * 0.01,
|
||||
mSize: parseInt($("#msize").val(), 10) * 0.01,
|
||||
mPosX: parseInt($("#mposx").val(), 10) * 0.01,
|
||||
mPosY: parseInt($("#mposy").val(), 10) * 0.01,
|
||||
|
||||
label: $("#label").val(),
|
||||
fontname: $("#font").val(),
|
||||
fontcolor: $("#fontcolor").val(),
|
||||
label: $("#label").val(),
|
||||
fontname: $("#font").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();
|
||||
updateQrCode();
|
||||
},
|
||||
updateGui();
|
||||
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) {
|
||||
$("#img-buffer").attr("src", event.target.result);
|
||||
$("#mode").val("4");
|
||||
setTimeout(update, 250);
|
||||
};
|
||||
reader.readAsDataURL(input.files[0]);
|
||||
}
|
||||
},
|
||||
reader.onload = function (event) {
|
||||
$("#img-buffer").attr("src", event.target.result);
|
||||
$("#mode").val("4");
|
||||
setTimeout(update, 250);
|
||||
};
|
||||
reader.readAsDataURL(input.files[0]);
|
||||
}
|
||||
},
|
||||
|
||||
download = function (event) {
|
||||
download = function (event) {
|
||||
|
||||
var data = $("#container canvas")[0].toDataURL('image/png');
|
||||
$("#download").attr("href", data);
|
||||
};
|
||||
var data = $("#container canvas")[0].toDataURL('image/png');
|
||||
$("#download").attr("href", data);
|
||||
};
|
||||
|
||||
|
||||
$(function () {
|
||||
$(function () {
|
||||
|
||||
if (isOpera) {
|
||||
$('html').addClass('opera');
|
||||
$('#radius').prop('disabled', true);
|
||||
}
|
||||
if (isOpera) {
|
||||
$('html').addClass('opera');
|
||||
$('#radius').prop('disabled', true);
|
||||
}
|
||||
|
||||
$("#download").on("click", download);
|
||||
$("#image").on('change', onImageInput);
|
||||
$("input, textarea, select").on("input change", update);
|
||||
$(window).load(update);
|
||||
update();
|
||||
});
|
||||
$("#download").on("click", download);
|
||||
$("#image").on('change', onImageInput);
|
||||
$("input, textarea, select").on("input change", update);
|
||||
$(window).load(update);
|
||||
update();
|
||||
});
|
||||
|
||||
}(jQuery));
|
||||
}());
|
||||
|
||||
+60
-61
@@ -1,112 +1,111 @@
|
||||
|
||||
body {
|
||||
font-family: Ubuntu;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
background: repeat url("back.png");
|
||||
font-family: Ubuntu;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
background: repeat url("back.png");
|
||||
}
|
||||
|
||||
#banner {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: rgb(29, 119, 194);
|
||||
padding: 12px 0 0;
|
||||
text-align: center;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: rgb(29, 119, 194);
|
||||
padding: 12px 0 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#banner:hover {
|
||||
color: #333;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
#container {
|
||||
display: inline-block;
|
||||
margin: 20px auto;
|
||||
box-shadow: 0 0 16px rgba(0,0,0,0.5);
|
||||
display: inline-block;
|
||||
margin: 20px auto;
|
||||
box-shadow: 0 0 16px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
#container > * {
|
||||
display: block;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.control {
|
||||
position: absolute;
|
||||
background-color: #f8f8f8;
|
||||
top: 0;
|
||||
width: 190px;
|
||||
box-shadow: 0 0 32px rgba(0,0,0,0.5);
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
position: absolute;
|
||||
background-color: #f8f8f8;
|
||||
top: 0;
|
||||
width: 190px;
|
||||
box-shadow: 0 0 32px rgba(0,0,0,0.5);
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.control.left {
|
||||
left: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.control.right {
|
||||
right: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 12px 0 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
height: 1px;
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
margin: 12px 0 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
height: 1px;
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 10px;
|
||||
color: #bbb;
|
||||
padding: 12px 4px 0 4px;
|
||||
font-size: 10px;
|
||||
color: #bbb;
|
||||
padding: 12px 4px 0 4px;
|
||||
}
|
||||
|
||||
html.opera label[for="radius"] {
|
||||
color: #e55;
|
||||
color: #e55;
|
||||
}
|
||||
|
||||
#download {
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
color: #555;
|
||||
background-color: #ddd;
|
||||
margin: 4px;
|
||||
padding: 8px 0;
|
||||
border: 1px solid #ddd;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
color: #555;
|
||||
background-color: #ddd;
|
||||
margin: 4px;
|
||||
padding: 8px 0;
|
||||
border: 1px solid #ddd;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input, textarea, select {
|
||||
font-family: Ubuntu;
|
||||
display: block;
|
||||
background-color: #fff;
|
||||
margin: 2px;
|
||||
padding: 0 2px;
|
||||
border: 1px solid #ddd;
|
||||
width: 180px;
|
||||
height: 22px;
|
||||
font-family: Ubuntu;
|
||||
display: block;
|
||||
background-color: #fff;
|
||||
margin: 2px;
|
||||
padding: 0 2px;
|
||||
border: 1px solid #ddd;
|
||||
width: 180px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
#text {
|
||||
height: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
#img-buffer {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
input[type="range"] {
|
||||
-webkit-appearance: none;
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
input::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 3px;
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #aaa), color-stop(1, #aaa) );
|
||||
-webkit-appearance: none;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 3px;
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #aaa), color-stop(1, #aaa) );
|
||||
}
|
||||
|
||||
+463
-461
@@ -1,469 +1,471 @@
|
||||
(function ($) {
|
||||
'use strict';
|
||||
|
||||
|
||||
// Wrapper for the original QR code generator.
|
||||
var QRCode = function (text, level, version, quiet) {
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
var $ = jQuery;
|
||||
|
||||
// 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`
|
||||
// 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 = {
|
||||
return createDiv(settings);
|
||||
},
|
||||
|
||||
// render method: `'canvas'`, `'image'` or `'div'`
|
||||
render: 'canvas',
|
||||
|
||||
// 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
|
||||
};
|
||||
|
||||
// Register the plugin
|
||||
// -------------------
|
||||
$.fn.qrcode = function(options) {
|
||||
// Plugin
|
||||
// ======
|
||||
|
||||
// Default settings
|
||||
// ----------------
|
||||
defaults = {
|
||||
|
||||
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') {
|
||||
drawOnCanvas(this, settings);
|
||||
} else {
|
||||
$(this).append(createHTML(settings));
|
||||
}
|
||||
});
|
||||
};
|
||||
// Register the plugin
|
||||
// -------------------
|
||||
$.fn.qrcode = function(options) {
|
||||
|
||||
// jQuery.qrcode plug in code ends here
|
||||
var settings = $.extend({}, defaults, options);
|
||||
|
||||
// QR Code Generator
|
||||
// =================
|
||||
// @include "qrcode.js"
|
||||
return this.each(function () {
|
||||
|
||||
}(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"
|
||||
|
||||
}());
|
||||
|
||||
+1647
-1647
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user