55 lines
1.7 KiB
HTML
55 lines
1.7 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<title>client side test for node-qrcode</title>
|
|
<!--[if ie]><script type="text/javascript" src="vendors/excanvas/excanvas.js"></script><![endif]-->
|
|
<script src="/build/qrcode.js"></script>
|
|
<style>.b{display:block;}</style>
|
|
</head>
|
|
<body>
|
|
|
|
<canvas id="test"></canvas>
|
|
<label for="test-text" class="b">type here and watch it update!:</label>
|
|
<textarea id="test-text" class="b"></textarea>
|
|
<small style="color:#d4d4d4;" class="b">* i did not include jquery on purpose</small>
|
|
<script>
|
|
if(!window.console) window.console = {log:function(){},warn:function(){}};
|
|
|
|
var qrcodedraw = new qrcodelib.qrcodedraw();
|
|
//triggered errors will throw
|
|
qrcodedraw.errorBehavior.length = false;
|
|
var drawQR = function(text){
|
|
qrcodedraw.draw(document.getElementById('test'),text,function(error,canvas){
|
|
if(error) {
|
|
if(window.console && window.console.warn) {
|
|
console.warn(error);
|
|
} else {
|
|
alert(error);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
var ta = document.getElementById('test-text'),last=0,lastTime = 1;
|
|
ta.addEventListener('keyup',function(){
|
|
|
|
var l = Date.now(),z = this;
|
|
last = l;
|
|
setTimeout(function(){
|
|
//this will kinda lock the browsers event loop for a sec.
|
|
//it could have some setTimeout within processing to make it more client side friendly. or web workers...
|
|
if(l == last) {
|
|
var s=Date.now();
|
|
drawQR(z.value);
|
|
lastTime = Date.now()-s;
|
|
}
|
|
},lastTime+(lastTime/2));
|
|
},false);
|
|
|
|
ta.value = 'i work client side too?';
|
|
drawQR('i work client side too?');
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|