|
|
|
(function () {
|
|
|
|
'use strict';
|
|
|
|
|
|
|
|
var $ = jQuery;
|
|
|
|
var guiValuePairs = [
|
|
|
|
['size', 'px'],
|
|
|
|
['minversion', ''],
|
|
|
|
['quiet', ' modules'],
|
|
|
|
['radius', '%'],
|
|
|
|
['msize', '%'],
|
|
|
|
['mposx', '%'],
|
|
|
|
['mposy', '%']
|
|
|
|
];
|
|
|
|
|
|
|
|
function updateGui() {
|
|
|
|
|
|
|
|
$.each(guiValuePairs, function (idx, pair) {
|
|
|
|
|
|
|
|
var $label = $('label[for="' + pair[0] + '"]');
|
|
|
|
$label.text($label.text().replace(/:.*/, ': ' + $('#' + pair[0]).val() + pair[1]));
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
function updateQrCode() {
|
|
|
|
|
|
|
|
var options = {
|
|
|
|
render: $('#render').val(),
|
|
|
|
ecLevel: $('#eclevel').val(),
|
|
|
|
minVersion: parseInt($('#minversion').val(), 10),
|
|
|
|
|
|
|
|
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),
|
|
|
|
|
|
|
|
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,
|
|
|
|
|
|
|
|
label: $('#label').val(),
|
|
|
|
fontname: $('#font').val(),
|
|
|
|
fontcolor: $('#fontcolor').val(),
|
|
|
|
|
|
|
|
image: $('#img-buffer')[0]
|
|
|
|
};
|
|
|
|
|
|
|
|
$('#container').empty().qrcode(options);
|
|
|
|
}
|
|
|
|
|
|
|
|
function update() {
|
|
|
|
|
|
|
|
updateGui();
|
|
|
|
updateQrCode();
|
|
|
|
}
|
|
|
|
|
|
|
|
function onImageInput() {
|
|
|
|
|
|
|
|
var input = $('#image')[0];
|
|
|
|
if (input.files && input.files[0]) {
|
|
|
|
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]);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function download() {
|
|
|
|
|
|
|
|
$('#download').attr('href', $('#container canvas')[0].toDataURL('image/png'));
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
$(function () {
|
|
|
|
|
|
|
|
$('#download').on('click', download);
|
|
|
|
$('#image').on('change', onImageInput);
|
|
|
|
$('input, textarea, select').on('input change', update);
|
|
|
|
$(window).load(update);
|
|
|
|
update();
|
|
|
|
});
|
|
|
|
|
|
|
|
}());
|