61 lines
1.8 KiB
JavaScript
61 lines
1.8 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
const download = document.querySelector('#download');
|
|
|
|
console.log('I\'m outside clickers');
|
|
|
|
document.querySelector('#gen').addEventListener('click', () => {
|
|
let link = document.querySelector('input[name="link"]').value;
|
|
let idInstr =document.querySelector('input[name="id-str"]').value;
|
|
|
|
let canvas = document.querySelector('canvas');
|
|
const ctx = canvas.getContext('2d');
|
|
ctx.clearRect(0,0,canvas.width, canvas.height);
|
|
|
|
ctx.fillStyle = "#333";
|
|
|
|
// Prepare img elements
|
|
const qrImg = new Image();
|
|
const ispcLogo = new Image();
|
|
const erihsLogo = new Image();
|
|
|
|
ispcLogo.src = "./img/logo_ispc.png";
|
|
erihsLogo.src = "./img/e-rihsit_logo.png";
|
|
|
|
let qr = new QRious({element: qrImg});
|
|
|
|
qr.set({
|
|
size: 200,
|
|
value: link
|
|
})
|
|
|
|
// Draw images
|
|
ispcLogo.onload = () => {
|
|
ctx.drawImage(ispcLogo, 25, 10, 200, 75)
|
|
}
|
|
|
|
qrImg.src = qr.toDataURL();
|
|
qrImg.onload = () => {
|
|
ctx.drawImage(qrImg, 25, 90, 200, 200)
|
|
}
|
|
// Draw instrument ID as text
|
|
ctx.font = '48px sans-serif';
|
|
ctx.fillText(idInstr, 45, 330);
|
|
|
|
erihsLogo.onload = () => {
|
|
ctx.drawImage(erihsLogo, 25, 355, 200, 41)
|
|
}
|
|
download.classList.remove('disabled');
|
|
});
|
|
|
|
download.addEventListener('click', () => {
|
|
let downloadLink = document.createElement('a');
|
|
downloadLink.setAttribute('download', 'etichetta.png');
|
|
let canvas = document.querySelector('canvas');
|
|
|
|
canvas.toBlob(function(blob) {
|
|
let url = URL.createObjectURL(blob);
|
|
downloadLink.setAttribute('href', url);
|
|
downloadLink.click();
|
|
});
|
|
});
|
|
}); |