HTML5+规范API-扫码功能_html5 扫码-CSDN博客

本文链接：https://blog.csdn.net/blbyu/article/details/124395916

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

<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>