HTML5+规范API-扫码功能

Posted 2022-04-25 时光-ing

简介： 扫码的两种实现：①直接对外部进行扫描；②点开相册对已有图片进行扫一扫
完整代码一

<button type="button" class="mui-btn mui-btn-blue" id="btn">按钮</button>
<div id="bcid"></div>
<script type="text/javascript">
	var btn = document.getElementById("btn");
	btn.addEventListener("tap",function()
		var bc = new plus.barcode.Barcode("bcid",[],);
		bc.start(); //显示动态的扫描条纹
		
		// 条码识别成功事件
		bc.onmarked = function(type,code,file)
			alert(type);  //识别到的条码类型
			alert(code);  //识别到的条码数据
			alert(file);  //识别到的图片文件路径
		
		 // 条码识别失败事件
		bc.onerror = function()
			
		
	);
</script>

效果展示



完整代码二

<button type="button" class="mui-btn mui-btn-blue" id="pick">从相册选取图片</button>
<script type="text/javascript">
	var pick = document.getElementById("pick");
	// 打开系统相册
	pick.addEventListener("tap",function()
		plus.gallery.pick(function(filepath)
			plus.barcode.scan(filepath,function(type,code)  // scan：通过图片扫描条码数据
				alert(type);
				alert(code);
			)
		)
	)
</script>

效果展示