js解析二维码图片内容

asfx站长

2020.08.11 16:55:09 阅读 1518

### [在线工具，二维码生成&解析](http://www.asfx.xyz/tool/qrcode "在线工具-二维码生成&解析")

页面
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>解析二维码</title>
</head>
<body>
<div style="text-align: center;">
    <h3>解析二维码</h3>
    点我上传二维码：<input type="file" id="img_jx"><br/><br/>
    <textarea id="text" cols="100" rows="10" placeholder="解析结果..."></textarea>
</div>
<script src="jquery.js"></script>
<script src="qrcode.js"></script>
<script src="util.js"></script>
<script src="analyseCode.js"></script>
<script>
	//清空原图片
	$("#img_jx").click(function () {
        $("#img_jx").val('');
    });
	//解析二维码图片
	$("#img_jx").on('change', function() {
        analyticCode.getUrl(
            'file-url', this,
            function(url){
                url = decodeStr(url);//解决中文乱码的问题
                console.log(url);
				$('#text').val(url);
            }
        )
    });
</script>
</body>
</html>
```

qrcode.js文件自己网上找一个吧，或者自己进群找站长要~

util.js
```javascript
//解码，解决中文乱码问题
function decodeStr(str) {
    var out, i, len, c;
    var char2, char3;
    out = "";
    len = str.length;
    i = 0;
    while (i < len) {
        c = str.charCodeAt(i++);
        switch (c >> 4) {
            case 0:
            case 1:
            case 2:
            case 3:
            case 4:
            case 5:
            case 6:
            case 7:
                // 0xxxxxxx
                out += str.charAt(i - 1);
                break;
            case 12:
            case 13:
                // 110x xxxx 10xx xxxx
                char2 = str.charCodeAt(i++);
                out += String.fromCharCode(((c & 0x1F) << 6) | (char2 & 0x3F));
                break;
            case 14:
                // 1110 xxxx 10xx xxxx 10xx xxxx
                char2 = str.charCodeAt(i++);
                char3 = str.charCodeAt(i++);
                out += String.fromCharCode(((c & 0x0F) << 12) |
                    ((char2 & 0x3F) << 6) |
                    ((char3 & 0x3F) << 0));
                break;
        }
    }
    return out;
}
```

analyseCode.js
```javascript
!function(){
    "use strict";

//获取预览图片路径
    var getObjectURL = function(file){
        var url = null ;
        if (window.createObjectURL!=undefined) { // basic
            url = window.createObjectURL(file) ;
        } else if (window.URL!=undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file) ;
        } else if (window.webkitURL!=undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file) ;
        }
        return url ;
    }

```