js读取条形码中的内容

最新推荐文章于 2024-04-24 16:59:09 发布

你听_我说

最新推荐文章于 2024-04-24 16:59:09 发布

阅读量1.4k

点赞数 1

分类专栏： js读取条形码文章标签： js

本文链接：https://blog.csdn.net/weixin_39236419/article/details/106101366

版权

js读取条形码专栏收录该内容

1 篇文章 0 订阅

订阅专栏

首先下载git：https://github.com/serratus/quaggaJS
导入dist文件夹下面的quagga.js

<!DOCTYPE html>
<html>
	<body>
		<section id="container" class="container">
			<div class="controls">
				<fieldset class="input-group">
					<input type="file" accept="image/*;capture=camera">
					<button>Rerun</button>
				</fieldset>
			</div>
			<div id="result_strip">
				<ul class="thumbnails"></ul>
			</div>
		</section>
		<script src="jquery-1.11.3.min.js"></script>
		<script src="quagga.min.js" type="text/javascript"></script>
		<script>
			$(function() {
				$(".controls button").on("click", function(e) {
					var input = document.querySelector(".controls input[type=file]");
					if (input.files && input.files.length) {
						Quagga.decodeSingle({
							inputStream: {
								size: 800 // 这里指定图片的大小，需要自己测试一下
							},
							locator: {
								patchSize: "medium",
								halfSample: false
							},
							numOfWorkers: 1,
							decoder: {
								readers: [{
									format: "ean_reader", // 这里指定ean条形码，就是国际13位的条形码
									config: {}
								}]
							},
							locate: true,
							src: URL.createObjectURL(input.files[0])
						}, function(result) {
							var code = result.codeResult.code,
								$node,
								canvas = Quagga.canvas.dom.image;
							// 将扫描得到的条形码打印出来
							$node = $(
								'<li><div class="thumbnail"><div class="imgWrapper"><img /></div><div class="caption"><h4 class="code"></h4></div></div></li>'
							);
							$node.find("img").attr("src", canvas.toDataURL());
							$node.find("h4.code").html(code);
							$("#result_strip ul.thumbnails").prepend($node);
						});
					}
				});
			});
		</script>
	</body>
</html>

你听_我说

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js读取条形码中的内容

首先下载git：https://github.com/serratus/quaggaJS导入dist文件夹下面的quagga.js<!DOCTYPE html><html> <body> <section id="container" class="container"> <div class="controls"> <fieldset class="input-group"> <input t
复制链接

扫一扫