Updates demo.
Lars Jung
12 years ago
parent
974002f950
commit
ceac699d47
@ -1,5 +1,13 @@
|
|||||||
{
|
{
|
||||||
"name": "jquery.qrcode",
|
"name": "jquery.qrcode",
|
||||||
"displayName": "jQuery.qrcode",
|
"displayName": "jQuery.qrcode",
|
||||||
"version": "0.6.0-dev"
|
"version": "0.6.0+",
|
||||||
|
"description": "generate QR codes dynamically",
|
||||||
|
"url": "http://larsjung.de/qrcode/",
|
||||||
|
"author": "Lars Jung",
|
||||||
|
"license": "MIT",
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "https://github.com/lrsjng/jQuery.qrcode.git"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,99 +1,103 @@
|
|||||||
|
|
||||||
var isOpera = Object.prototype.toString.call(window.opera) == '[object Opera]',
|
(function ($) {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
guiValuePairs = [
|
var isOpera = Object.prototype.toString.call(window.opera) === '[object Opera]',
|
||||||
["size", "px"],
|
|
||||||
["minversion", ""],
|
|
||||||
["quiet", "modules"],
|
|
||||||
["radius", "%"],
|
|
||||||
["msize", "%"],
|
|
||||||
["mposx", "%"],
|
|
||||||
["mposy", "%"]
|
|
||||||
],
|
|
||||||
|
|
||||||
updateGui = function () {
|
guiValuePairs = [
|
||||||
|
["size", "px"],
|
||||||
|
["minversion", ""],
|
||||||
|
["quiet", " modules"],
|
||||||
|
["radius", "%"],
|
||||||
|
["msize", "%"],
|
||||||
|
["mposx", "%"],
|
||||||
|
["mposy", "%"]
|
||||||
|
],
|
||||||
|
|
||||||
for (var idx in guiValuePairs) {
|
updateGui = function () {
|
||||||
|
|
||||||
var pair = guiValuePairs[idx],
|
$.each(guiValuePairs, function (idx, pair) {
|
||||||
$label = $('label[for="' + pair[0] + '"]');
|
|
||||||
|
|
||||||
$label.text($label.text().replace(/:.*/, ': ' + $('#' + pair[0]).val() + pair[1]));
|
var $label = $('label[for="' + pair[0] + '"]');
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
updateQrCode = function () {
|
$label.text($label.text().replace(/:.*/, ': ' + $('#' + pair[0]).val() + pair[1]));
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
var options = {
|
updateQrCode = function () {
|
||||||
render: $("#render").val(),
|
|
||||||
ecLevel: $("#eclevel").val(),
|
|
||||||
minVersion: parseInt($("#minversion").val(), 10),
|
|
||||||
|
|
||||||
fill: $("#fill").val(),
|
var options = {
|
||||||
background: $("#background").val(),
|
render: $("#render").val(),
|
||||||
// fill: $("#img-buffer")[0],
|
ecLevel: $("#eclevel").val(),
|
||||||
|
minVersion: parseInt($("#minversion").val(), 10),
|
||||||
|
|
||||||
text: $("#text").val(),
|
fill: $("#fill").val(),
|
||||||
size: parseInt($("#size").val(), 10),
|
background: $("#background").val(),
|
||||||
radius: parseInt($("#radius").val(), 10) * 0.01,
|
// fill: $("#img-buffer")[0],
|
||||||
quiet: parseInt($("#quiet").val(), 10),
|
|
||||||
|
|
||||||
mode: parseInt($("#mode").val(), 10),
|
text: $("#text").val(),
|
||||||
|
size: parseInt($("#size").val(), 10),
|
||||||
|
radius: parseInt($("#radius").val(), 10) * 0.01,
|
||||||
|
quiet: parseInt($("#quiet").val(), 10),
|
||||||
|
|
||||||
mSize: parseInt($("#msize").val(), 10) * 0.01,
|
mode: parseInt($("#mode").val(), 10),
|
||||||
mPosX: parseInt($("#mposx").val(), 10) * 0.01,
|
|
||||||
mPosY: parseInt($("#mposy").val(), 10) * 0.01,
|
|
||||||
|
|
||||||
label: $("#label").val(),
|
mSize: parseInt($("#msize").val(), 10) * 0.01,
|
||||||
fontname: $("#font").val(),
|
mPosX: parseInt($("#mposx").val(), 10) * 0.01,
|
||||||
fontcolor: $("#fontcolor").val(),
|
mPosY: parseInt($("#mposy").val(), 10) * 0.01,
|
||||||
|
|
||||||
image: $("#img-buffer")[0]
|
label: $("#label").val(),
|
||||||
};
|
fontname: $("#font").val(),
|
||||||
|
fontcolor: $("#fontcolor").val(),
|
||||||
|
|
||||||
$("#container").empty().qrcode(options);
|
image: $("#img-buffer")[0]
|
||||||
},
|
};
|
||||||
|
|
||||||
update = function () {
|
$("#container").empty().qrcode(options);
|
||||||
|
},
|
||||||
|
|
||||||
updateGui();
|
update = function () {
|
||||||
updateQrCode();
|
|
||||||
},
|
|
||||||
|
|
||||||
onImageInput = function () {
|
updateGui();
|
||||||
|
updateQrCode();
|
||||||
|
},
|
||||||
|
|
||||||
var input = $("#image")[0];
|
onImageInput = function () {
|
||||||
|
|
||||||
if (input.files && input.files[0]) {
|
var input = $("#image")[0];
|
||||||
|
|
||||||
var reader = new FileReader();
|
if (input.files && input.files[0]) {
|
||||||
|
|
||||||
reader.onload = function (event) {
|
var reader = new FileReader();
|
||||||
$("#img-buffer").attr("src", event.target.result);
|
|
||||||
$("#mode").val("4");
|
reader.onload = function (event) {
|
||||||
setTimeout(update, 250);
|
$("#img-buffer").attr("src", event.target.result);
|
||||||
};
|
$("#mode").val("4");
|
||||||
reader.readAsDataURL(input.files[0]);
|
setTimeout(update, 250);
|
||||||
}
|
};
|
||||||
},
|
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) {
|
||||||
|
$('html').addClass('opera');
|
||||||
|
$('#radius').prop('disabled', true);
|
||||||
|
}
|
||||||
|
|
||||||
if (isOpera) {
|
$("#download").on("click", download);
|
||||||
$('html').addClass('opera');
|
$("#image").on('change', onImageInput);
|
||||||
$('#radius').prop('disabled', true);
|
$("input, textarea, select").on("input change", update);
|
||||||
}
|
$(window).load(update);
|
||||||
|
update();
|
||||||
|
});
|
||||||
|
|
||||||
$("#download").on("click", download);
|
}(jQuery));
|
||||||
$("#image").on('change', onImageInput);
|
|
||||||
$("input, textarea, select").on("input change", update);
|
|
||||||
$(window).load(update);
|
|
||||||
update();
|
|
||||||
});
|
|
||||||
|
|||||||
Loading…
Reference in New Issue