<html>
<head>
<title>QR</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<div class="form-group" id="qrcodesblock">
<label class="form-control">Paste QR Codes</label>
<textarea class="form-control" rows=5 id="qrCodes"></textArea>
<button class="btn btn-default form-control" onclick="javascript:beginProcessing()">Make Image and Body Image as downloadable PNG files.</button>
<a href="" id="qrImageLink" download style="display: none;">Download QR (PNG)</a>
<a href="" id="bodyImageLink" download style="display: none;">Download Body (PNG)</a>
</div>
<span id="status"></span>
<img src="band.png" width="0" height="0" id="band"></img>
<img src="" width="0" height="0" id="qrImage"></img>
<canvas id="canvasId" width="900" height="960"></canvas>
<canvas id="qrCanvasId" width="900" height="960"></canvas>
<canvas id="bodyCanvasId" width="900" height="960"></canvas>
<body>
<script>
var canvasContext=document.getElementById("canvasId").getContext('2d');
var qrCanvasIdContext=document.getElementById("qrCanvasId").getContext('2d');
var bodyCanvasIdContext=document.getElementById("bodyCanvasId").getContext('2d');
var bandImage=document.getElementById("band");
var qrImage=document.getElementById("qrImage");
var increment=0;
var string="";
var info="";
var qrCode="";
var i=0;
var j=0;
function beginProcessing(){
info=document.getElementById("qrCodes").value+"\n";
run();
}
function run(){
i=increment%4;
j=parseInt(increment/4);
qrCode=info.substring(0,info.indexOf("\n"));
info=info.replace(qrCode+"\n","");
string="http://chart.apis.google.com/chart?cht=qr&chs=100x100&chld=H|0&chl="+qrCode;
qrImage.src=string;
qrImage.crossOrigin="anonymous";
//document.getElementById("status").innerHTML=string;
setTimeout(function(){getQrImage();},1000);
increment++;
}
function getQrImage(){
for(var x=7;x>0;x--){
qrCode=qrCode.substring(0, x)+" "+qrCode.substring(x,qrCode.length);}
canvasContext.drawImage(bandImage, i*179, j*120+5);
canvasContext.drawImage(qrImage, i*179+49, j*120+20+5,80,80);
canvasContext.fillText(qrCode, i*179+49+8, j*120+16+5);
qrCanvasIdContext.drawImage(qrImage, i*179+49, j*120+20+5,80,80);
qrCanvasIdContext.fillText(qrCode, i*179+49+8, j*120+16+5);
bodyCanvasIdContext.drawImage(bandImage, i*179, j*120+5);
if(info.length>0){
setTimeout(function(){run();},100);}else{
makeDownloadableLinks();}
}
function makeDownloadableLinks(){
document.getElementById("qrImageLink").download="QRImageFile.png";
document.getElementById("bodyImageLink").download="BodyFile.png";
document.getElementById("qrImageLink").href=document.getElementById("qrCanvasId").toDataURL("image/png");
document.getElementById("bodyImageLink").href=document.getElementById("bodyCanvasId").toDataURL("image/png");
document.getElementById("qrImageLink").style.display="block";
document.getElementById("bodyImageLink").style.display="block";
}
</script>
</body>
</html>