最近在做一个零售超市项目，但是苦于需要自己输入数据。超市里的商品有1000多种，一一进入是不现实的。因此，扫描商品的条形码并根据条形码获取商品的信息要高效得多。

根据条形码获取商品信息，在网上有很多API，一般不贵，可以直接使用，这里就略过了。

本文主要研究JavaScript识别图片中的条形码。

开源库quaggaJS

项目地址：https://github.com/serratus/quaggaJS

在此，感谢大神提供了这么精彩的js库，让我的想法得以实现！

这个库的使用也很简单，github上有很多解释，但是我只使用了扫描条码图片和获取条码的其中一个功能，所以我就直接举一个我需要的功能的例子，如果还有其他的需求，可以在上面的连接中找到。

页面部分

html body section id=' container ' class=' container ' div class=' controls ' field set class=' input-group ' input type=' file ' accept=' image/*；capture=camera ' button return/button/field set/div id=' result _ strip ' ul class='缩略图'/ul/div div id=' interactive ' class=' viewport ' canvas class=' imgBuffer ' width=' 800 ' height=' 566 '/canvasbr clear=' all '/div/section script src=' http 3360 jquery-1 . 11 . 0 . min

$(function() { $(')。控制按钮')。on('click '，函数(e){ var input=document . queryselector ')。控制输入[type=file]')；如果(input . filestinput . files . length){ quagga . decodesingle({ input stream 3360 { size : 800//在此指定图片的大小，则需要自己测试一下}、locator : { patcsize : ' medium '、halfSample: false }、numOfWorkers: 1、decoder 3: { readers 3:[{ format : ' ean _ reader '，//则函数(结果){ var code=result . coderesult . code，$node，canvas=quagga . canvas . DOM . image；//打印扫描的条码$ node=$(' lidiv class=' thumbnail ' div class=' imgwrapper ' img//div div class=' caption ' H4 class=' code '/H4/div/div/Li ')；$node.find('img ')。attr('src '，canvas . todaytaul())；$node.find('h4.code ')。html(代码)；$('#result_strip ul .缩略图')。prepend($ node)；});} });});效果显示

以上是根据边肖介绍的图片用JavaScript获取条码的方法。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！