js上传图片 识别条形码

本文介绍如何利用JavaScript技术实现在网页上进行条形码扫描与识别的功能,探讨相关API和库的应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

js识别条形码

对图片要求较高,有时候可能会识别不到!
    <script src="js/quagga.js"></script>
    quagga.js下载地址
    https://raw.githubusercontent.com/serratus/quaggaJS/master/lib/quagga.js
	<script type="text/javascript">
			//上传图片
			function change(event) {
				console.log(event.target.files);
				var file = event.target.files[0];
				if (file) {
					//转换成base64
					var reader = new FileReader();
					reader.readAsDataURL(file);
					reader.onload = function(res) {
						decode(res.target['result']);
					}
				}
			}
			//识别条形码
			function decode(src) {
				var config = {
					inputStream: {
						size: 800,
						singleChannel: false
					},
					locator: {
						patchSize: "medium",
						halfSample: true
					},
					decoder: {
						readers: [{
							format: "code_128_reader", //编码类型
							config: {}
						}]
					},
					locate: true,
					src: src
				}
				//识别条形码
				Quagga.decodeSingle(config, function(result) {
					if (!result) {
						
						alert("图片中没有条形码!请重新拍照或手动输入!");
						return false;
					}
					//识别结果
					if (result.codeResult) {
						alert("图片中的条形码为:" + result.codeResult.code);
					} else {
						alert("未识别到图片中的条形码!请重新拍照或手动输入!");
					}
				});
			}
		</script>
		<div>
			<p>上传图片识别条形码</p>
			<input type="file" id="file" value="" onchange="change(event)" />
		</div>
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值