全部文章

HTML 结构

<input type="text"/>

JS 代码

/*@
 * 二维码识别
 *

QRCodeReader('input'); // input 如果不传入函数,结果直接输出至 input
**/
function QRCodeReader(q, success, error){
	document.querySelectorAll(q).forEach(function(a){
		if(!a._qr){
			var q = document.createElement('input');
			q.type = 'file';
			q.accept = 'image/*';
			q.addEventListener('change', function(){
				upload(this.files[0], a);
			}, false);
			a._qr = q;
			a.addEventListener('click', function(){
				q.click();
			}, false);
		}
	});

	function upload(file, a){
		if(file.type.indexOf('image/') != 0 || file.size > 1024 * 1024){
			return j.error && error.call(a,
				file.type.indexOf('image/') != 0
					? '必须为图片文件'
					: '文件不能大于 1MB'
			);
		}
		var f = new FormData()
		f.append('file', file);

		// 上传文件 交给 服务端解析 二维码
		fetch('https://api.asilu.com/qrcode/', {
			method: 'POST',
			body: f
		}).then(function(r){
			return r.json();
		}).then(function(j){
			if(typeof success != 'function' &&  a.tagName == 'INPUT'){
				a.value = j.error || j.data
			}
			j.data && success && success.call(a, j.data);
			j.error && error && error.call(a, j.error);
		}).catch(function(er){
			console.error(er);
		});
	}
}

QRCodeReader('input');

服务端代码使用自己熟悉的语言实现的 ZXing 就好了

这里返回的 JSON 数据格式为

{
	"data": "二维码内容"
}