javascript解码读取二维码信息
javascript如何读取二维码的信息。本示例来源于:http://lazarsoft.info。本示例使用了html5的canvas对象,不支持IE8-,通过html5的canvas对象读入图片后处理读出二维码存储的信息。
注意:javascript使用的编码为unicode(utf-16),而二维码编码为UTF-8, ISO-8859-1等,所以包含中文时,javascript读取二维码的信息是utf-8编码的,中文会出现乱码,需要用javascript对信息进行转换,将解码后的二维码信息转为unicode编码。
如果提示“error decoding QR Code”错误,但是使用软件能正确解码,这个是因为二维码图片太小的问题,这个程序无法解码,将二维码放大(我这里测试至少200x200)就可以正常读取。
javascript如何读取二维码的信息源代码如下
<html> <head><meta http-equiv="content-type" content="txt/html;charset=utf-8" /> <title>javascript解码读取二维码信息</title> <script src="/demo/jsqrcode/grid.js"></script> <script src="/demo/jsqrcode/version.js"></script> <script src="/demo/jsqrcode/detector.js"></script> <script src="/demo/jsqrcode/formatinf.js"></script> <script src="/demo/jsqrcode/errorlevel.js"></script> <script src="/demo/jsqrcode/bitmat.js"></script> <script src="/demo/jsqrcode/datablock.js"></script> <script src="/demo/jsqrcode/bmparser.js"></script> <script src="/demo/jsqrcode/datamask.js"></script> <script src="/demo/jsqrcode/rsdecoder.js"></script> <script src="/demo/jsqrcode/gf256poly.js"></script> <script src="/demo/jsqrcode/gf256.js"></script> <script src="/demo/jsqrcode/decoder.js"></script> <script src="/demo/jsqrcode/qrcode.js"></script> <script src="/demo/jsqrcode/findpat.js"></script> <script src="/demo/jsqrcode/alignpat.js"></script> <script src="/demo/jsqrcode/databr.js"></script> <script type="text/javascript"> var gCtx = null; var gCanvas = null; var imageData = null; var ii=0; var jj=0; var c=0; function dragenter(e) { e.stopPropagation(); e.preventDefault(); } function dragover(e) { e.stopPropagation(); e.preventDefault(); } function drop(e) { e.stopPropagation(); e.preventDefault(); var dt = e.dataTransfer; var files = dt.files; handleFiles(files); } function handleFiles(f) { var o = []; for (var i = 0; i < f.length; i++) { var reader = new FileReader(); reader.onload = (function (theFile) { return function (e) { qrcode.decode(e.target.result); }; })(f[i]); // Read in the image file as a data URL. reader.readAsDataURL(f[i]); } } function load() { initCanvas(640, 480); qrcode.success = function (d) { alert('javascript读出的二维码信息为:' + utf8ToUtf16(d)) }; qrcode.error = function (d) { alert('读取二维码信息错误:' + utf8ToUtf16(d)) }; qrcode.callback = function (d, status) { alert('读取二维码信息' + (status == 1 ? '成功' : '失败') + ':' + utf8ToUtf16(d)); }; qrcode.decode("meqrthumb.png"); } function initCanvas(ww, hh) { gCanvas = document.getElementById("qr-canvas"); gCanvas.addEventListener("dragenter", dragenter, false); gCanvas.addEventListener("dragover", dragover, false); gCanvas.addEventListener("drop", drop, false); var w = ww; var h = hh; gCanvas.style.width = w + "px"; gCanvas.style.height = h + "px"; gCanvas.width = w; gCanvas.height = h; gCtx = gCanvas.getContext("2d"); gCtx.clearRect(0, 0, w, h); imageData = gCtx.getImageData(0, 0, 320, 240); } function utf8ToUtf16(s) {//将utf-8字符串转码为unicode字符串,要不读取的二维码信息包含中文会乱码 if (!s) { return; } var i, codes, bytes, ret = [], len = s.length; for (i = 0; i < len; i++) { codes = []; codes.push(s.charCodeAt(i)); if (((codes[0] >> 7) & 0xff) == 0x0) { //单字节 0xxxxxxx ret.push(s.charAt(i)); } else if (((codes[0] >> 5) & 0xff) == 0x6) { //双字节 110xxxxx 10xxxxxx codes.push(s.charCodeAt(++i)); bytes = []; bytes.push(codes[0] & 0x1f); bytes.push(codes[1] & 0x3f); ret.push(String.fromCharCode((bytes[0] << 6) | bytes[1])); } else if (((codes[0] >> 4) & 0xff) == 0xe) { //三字节 1110xxxx 10xxxxxx 10xxxxxx codes.push(s.charCodeAt(++i)); codes.push(s.charCodeAt(++i)); bytes = []; bytes.push((codes[0] << 4) | ((codes[1] >> 2) & 0xf)); bytes.push(((codes[1] & 0x3) << 6) | (codes[2] & 0x3f)); ret.push(String.fromCharCode((bytes[0] << 8) | bytes[1])); } } return ret.join(''); } </script> </head> <body onload="load()"> 将二维码图片拖放到下面的黑色框框内解码获取信息<br/> <canvas id="qr-canvas" width="640" height="480" style="border:solid 1px #000"></canvas> </body> </html>
jsqrcode使用方法:导入上面示例包含的脚本,然后设置解码二维码成功或者失败的回调函数
qrcode.callback=function(d){//d为解码失败提示信息或者二维码存储的信息,注意成功或者失败都是这个回调 }
由于成功或者失败都是同一个回调不好判断,所以进行了扩展,修改qrcode.js这个文件,增加了success和error这2个回调。callback就相当于解码完毕后执行的回调,新增回调参数status(为1说明解码成功,为0说明解码失败)。
qrcode.success=function(d){//d为二维码存储的信息 //.... } qrcode.error=function(d){//d为解码失败提示信息 //.... } qrcode.callback=function(d,status){//d为解码失败提示信息或者二维码存储的信息,status同上 //... }
jsqrcode解码二维码图片:qrcode.decode(url or DataURL)。url为图片地址或者DataUrl为图片的base64内容
jsqrcode解码canvas加载的二维码,不传递参数,自动获取html页面上放置的id="qr-canvas"这个对象:qrcode.decode()
点击下载javascript解码读取二维码信息压缩包
相关阅读
javascript/jquery绘制条形码/二维码插件barcode
javascript utf-8,unicode(utf-16)编码互换
计算机ansi,unicode,utf-16,utf-8编码详解
加支付宝好友偷能量挖...
原创文章,转载请注明出处:javascript解码读取二维码信息