<html>
<body onload="javascript:process()">
<img src="" width="0" height="0" id="qrImage"></img>
<svg id="svgCanvas"></svg>
<span id="status"></span>
</body>
<script>
var ns="http://www.w3.org/2000/svg";
var qrWidth=200;
var qrHeight=200;
var hiddenCanvas=document.createElement("canvas");
var hiddenCanvasContext=hiddenCanvas.getContext("2d");
var svgCanvas=document.getElementById("svgCanvas");
var qrImage=document.getElementById("qrImage");
hiddenCanvas.width=qrWidth;
hiddenCanvas.height=qrHeight;
svgCanvas.style.height=qrHeight;
function process(){
var string="";
var qrCode="a1b3cb2d";
string="http://chart.apis.google.com/chart?cht=qr&chs="+qrWidth+"x"+qrHeight+"&chld=H|0&chl="+qrCode;
qrImage.src=string;
qrImage.crossOrigin="anonymous";
setTimeout(function(){drawQrImage();},1000);
}
function drawQrImage(){
hiddenCanvasContext.drawImage(qrImage,0,0);
var qrFrame="";
var numberOfPixels="";
qrFrame = hiddenCanvasContext.getImageData(0, 0, qrWidth, qrHeight);
numberOfPixels = qrFrame.data.length / 4;
var pixelCount=0;
for (var i = 0; i < numberOfPixels; i++) {
if(qrFrame.data[i*4]>128){break;}
pixelCount++;
}
pixelCount=pixelCount/7;
var count=0;
var x=0;
var y=0;
for (var i = 0; i < numberOfPixels; i++) {
if(qrFrame.data[i*(4*pixelCount)]<128){
if(!((x<7&&y<7)||(x>17&&y<7)||(x<7&&y>17))&&x<25){
var dots=document.createElementNS(ns,"circle");
dots.setAttributeNS(null,"cx",x*pixelCount+pixelCount/2);
dots.setAttributeNS(null,"cy",y*pixelCount+pixelCount/2);
dots.setAttributeNS(null,"r",pixelCount/2);
//document.getElementById("status").innerHTML=canvas.width+","+canvas.height;
svgCanvas.appendChild(dots);
}
}
count++;
x=(count%qrWidth);
y=parseInt(count/qrWidth);
}
var qrLocation=document.createElementNS(ns,"circle");
qrLocation.setAttributeNS(null,"cx",3*pixelCount+pixelCount/2);
qrLocation.setAttributeNS(null,"cy",3*pixelCount+pixelCount/2);
qrLocation.setAttributeNS(null,"r",3*pixelCount);
qrLocation.setAttributeNS(null,"stroke-width",pixelCount);
qrLocation.setAttributeNS(null,"fill","white");
qrLocation.setAttributeNS(null,"stroke","black");
svgCanvas.appendChild(qrLocation);
var qrLocation=document.createElementNS(ns,"circle");
qrLocation.setAttributeNS(null,"cx",3*pixelCount+pixelCount/2);
qrLocation.setAttributeNS(null,"cy",3*pixelCount+pixelCount/2);
qrLocation.setAttributeNS(null,"r",1*pixelCount+pixelCount/2);
svgCanvas.appendChild(qrLocation);
var qrLocation=document.createElementNS(ns,"circle");
qrLocation.setAttributeNS(null,"cx",3*pixelCount+pixelCount/2+18*pixelCount);
qrLocation.setAttributeNS(null,"cy",3*pixelCount+pixelCount/2);
qrLocation.setAttributeNS(null,"r",3*pixelCount);
qrLocation.setAttributeNS(null,"stroke-width",pixelCount);
qrLocation.setAttributeNS(null,"fill","white");
qrLocation.setAttributeNS(null,"stroke","black");
svgCanvas.appendChild(qrLocation);
var qrLocation=document.createElementNS(ns,"circle");
qrLocation.setAttributeNS(null,"cx",3*pixelCount+pixelCount/2+18*pixelCount);
qrLocation.setAttributeNS(null,"cy",3*pixelCount+pixelCount/2);
qrLocation.setAttributeNS(null,"r",1*pixelCount+pixelCount/2);
svgCanvas.appendChild(qrLocation);
var qrLocation=document.createElementNS(ns,"circle");
qrLocation.setAttributeNS(null,"cx",3*pixelCount+pixelCount/2);
qrLocation.setAttributeNS(null,"cy",3*pixelCount+pixelCount/2+18*pixelCount);
qrLocation.setAttributeNS(null,"r",3*pixelCount);
qrLocation.setAttributeNS(null,"stroke-width",pixelCount);
qrLocation.setAttributeNS(null,"fill","white");
qrLocation.setAttributeNS(null,"stroke","black");
svgCanvas.appendChild(qrLocation);
var qrLocation=document.createElementNS(ns,"circle");
qrLocation.setAttributeNS(null,"cx",3*pixelCount+pixelCount/2);
qrLocation.setAttributeNS(null,"cy",3*pixelCount+pixelCount/2+18*pixelCount);
qrLocation.setAttributeNS(null,"r",1*pixelCount+pixelCount/2);
svgCanvas.appendChild(qrLocation);
}
</script>
</html>