<!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()
var drawQR = function (text) {
qrcodedraw.draw(document.getElementById('test'), text, {
version: 0,
errorCorrectLevel: qrcodedraw.QRErrorCorrectLevel.L
}, function (error, canvas) {
if (error) {
if (window.console && window.console.warn) {
console.warn(error)
} else {
window.alert(error)
}
}
})
}
var ta = document.getElementById('test-text')
var last = 0
var lastTime = 1
ta.addEventListener('keyup', function () {
var l = Date.now()
var 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>