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如何读取二维码的信息源代码如下

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解码读取二维码信息压缩包