html5调用手机本地摄像头和相册识别二维码

最新推荐文章于 2025-03-18 15:59:34 发布

bear_依旧。

最新推荐文章于 2025-03-18 15:59:34 发布

阅读量3.6k

点赞数

分类专栏：前端文章标签： html

本文链接：https://blog.youkuaiyun.com/qq_37212970/article/details/94553142

版权

前端专栏收录该内容

13 篇文章

订阅专栏

在官方H5+ API中barcode通过调用设备的摄像头对二维码进行扫描识别，扫描到二维码后进行解码并返回码数据内容及码类型。但是暂未给出识别手机拍摄的二维码，以下代码实现了此功能。

完整demo：https://download.youkuaiyun.com/download/qq_37212970/11270805

<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<script type="text/javascript" src="js/llqrcode.js"></script>
		<style type="text/css">
			#bcid {
				width: 100%;
				height: 86%;
				margin-top: 45px;
				position: absolute;
				background: #000000;
			}
			
			.fbt {
				color: #0E76E1;
				width: 50%;
				background-color: #ffffff;
				float: left;
				line-height: 44px;
				text-align: center;
			}
			
			#outdiv {
				width: 320px;
				height: 240px;
				border: solid;
				border-width: 3px 3px 3px 3px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav" style="background-color: #ffffff;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title" style="color: #0E76E1;">物品二维码扫描</h1>
			<span class="mui-icon mui-icon-spinner-cycle mui-spin mui-pull-right" id="turnTheLight"></span>
		</header>

		<div id="bcid">
			<!--盛放扫描控件的div-->
		</div>

		<div class="mui-bar mui-bar-footer" style="padding: 0px;">
			<div class="fbt" onclick="scanPicture();">从相册选择二维码</div>
			<div class="fbt mui-action-back">取　 消</div>
		</div>
		<div align="center" style="display: none;">
			<div id="outdiv">
			</div>
		</div>
		<canvas id="qr-canvas" width="800" height="600"></canvas>
		<script type="text/javascript">
			scan = null; //扫描对象  
			mui.plusReady(function() {
				mui.init();
				startRecognize();
			});

			function startRecognize() {
				try {
					var filter;
					//自定义的扫描控件样式  
					var styles = {
						frameColor: "#29E52C",
						scanbarColor: "#29E52C",
						background: ""
					}
					//扫描控件构造  
					scan = new plus.barcode.Barcode('bcid', filter, styles);
					scan.onmarked = onmarked;
					scan.onerror = onerror;
					scan.start();
					//打开关闭闪光灯处理  
					var flag = false;
					document.getElementById("turnTheLight").addEventListener('tap', function() {
						if(flag == false) {
							scan.setFlash(true);
							flag = true;
						} else {
							scan.setFlash(false);
							flag = false;
						}
					});
				} catch(e) {
					alert("出现错误啦:\n" + e);
				}
			};

			function onerror(e) {
				alert(e);
			};

			function onmarked(type, result) {
				var text = '';
				switch(type) {
					case plus.barcode.QR:
						text = 'QR: ';
						break;
					case plus.barcode.EAN13:
						text = 'EAN13: ';
						break;
					case plus.barcode.EAN8:
						text = 'EAN8: ';
						break;
				}
				alert(text + " : " + result);

			};
		</script>
		<script type="text/javascript">
				load();
				var gCtx = null;
				var gCanvas = null;
				var c = 0;
				var stype = 0;
				var gUM = false;
				var webkit = false;
				var moz = false;
				var v = null;

				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;
					if(files.length > 0) {
						handleFiles(files);
					} else
					if(dt.getData('URL')) {
						qrcode.decode(dt.getData('URL'));
					}
				}

				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]);
						reader.readAsDataURL(f[i]);
					}
				}

				function initCanvas(w, h) {
					gCanvas = document.getElementById("qr-canvas");
					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);
				}

				function captureToCanvas() {
					if(stype != 1)
						return;
					if(gUM) {
						try {
							gCtx.drawImage(v, 0, 0);
							try {
								qrcode.decode();
							} catch(e) {
								console.log(e);
								setTimeout(captureToCanvas, 500);
							};
						} catch(e) {
							console.log(e);
							setTimeout(captureToCanvas, 500);
						};
					}
				}

				function htmlEntities(str) {
					return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
				}

				function read(a) {

					alert(a);

				}

				function isCanvasSupported() {
					var elem = document.createElement('canvas');
					return !!(elem.getContext && elem.getContext('2d'));
				}

				function success(stream) {

					v.srcObject = stream;
					v.play();

					gUM = true;
					setTimeout(captureToCanvas, 500);
				}

				function error(error) {
					gUM = false;
					return;
				}

				function load() {
					if(isCanvasSupported() && window.File && window.FileReader) {
						initCanvas(800, 600);
						qrcode.callback = read;
					} else {
						alert("您当前浏览器不支持扫码!");
					}
				}

				function scanPicture() {
					//隐藏了从相册获取图片的情况
					var imghtml = '<div id="qrfile"><canvas id="out-canvas" width="320" height="240"></canvas>' +
						'<div id="imghelp"  style="display:none">' +
						'<span class="fileinput-button"> <input id="picselect" type="file"  onchange="handleFiles(this.files)"  > </span>' +
						'</div>' +
						'</div>';

					document.getElementById("outdiv").innerHTML = imghtml; //绘制选取样式
					//这里模拟点击事件
					var fileEle = document.getElementById('picselect');
					if(fileEle) {
						fileEle.click();
					}

					var qrfile = document.getElementById("qrfile");
					qrfile.addEventListener("dragenter", dragenter, false);
					qrfile.addEventListener("dragover", dragover, false);
					qrfile.addEventListener("drop", drop, false);
					stype = 2;
				}
		</script>
	</body>

</html>