js上传图片识别条形码

最新推荐文章于 2025-07-10 15:21:55 发布

翻译最新推荐文章于 2025-07-10 15:21:55 发布 · 1.1k 阅读

文章标签：

#识别条形码

本文介绍如何利用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>