使用JavaScript根据图片获取条形码的方法

IeSneaker 2017-07-04

最近在弄一个零售超市的项目，但是苦于需要自己录入数据，超市少的也有1000多种商品，自己一个一个录入肯定不太现实，所以考虑扫描商品的条形码，根据条形码获取商品的信息这样效率就高多了。

根据条形码获取商品信息这个在网上有很多api一般都是付费的费用不高，可以直接拿来用，这里就略过了。

这里重点说说JavaScript识别图片中的条形码。

开源库quaggaJS

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

这里要感谢大神提供这么牛B的js库，让我的想法得以实现！

这个库的使用方式也非常简单，在github上有很丰富的讲解，但是我只使用了其中一个扫描条形码图片，获取条形码的功能，所以我就直接把我需要的功能列举一个例子，有其他的需求的可以去上面的连接里面找。

页面部分

<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>
 <div id="interactive" class="viewport"><canvas class="imgBuffer" width="800" height="566"></canvas><canvas class="drawingBuffer" width="800" height="566"></canvas><br clear="all"></div>
</section>
<script src="jquery-1.11.0.min.js"></script>
<script src="quagga.min.js" type="text/javascript"></script>
<script src="file_input.js" type="text/javascript"></script>
</body>
</html>

JavaScript部分

$(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);
      });
    }
  });
});

效果展示

使用JavaScript根据图片获取条形码的方法

IeSneaker

IeSneaker

相关推荐

二维码、条形码扫描——使用Google ZXing

我在项目中用到了二维码扫描的技术，用的是Google提供的ZXing开源项目，它提供二维码和条形码的扫描。扫描条形码就是直接读取条形码的内容，扫描二维码是按照自己指定的二维码格式进行编码和解码。其中encoding包是我 在它的基础上自己加上去的，功能是根

89367267 / 0评论 2013-07-17

基于google Zxing实现二维码、条形码扫描，仿微信二维码扫描效果

了解二维码这个东西还是从微信中，当时微信推出二维码扫描功能，自己感觉挺新颖的，从一张图片中扫一下竟然能直接加好友，不可思议啊，那时候还不了解二维码，呵呵，然后做项目的时候，老板说要加上二维码扫描功能，然后自己的屁颠屁颠的去百度，google啥的，发现很多朋

Litchi / 0评论 2013-09-02

微信小程序实现条形码,二维码生成和微信小程序扫码

scanType：扫码类型,默认为['barCode', 'qrCode'],参数可以为数组也可以为字符串,可选参数:barCode(一维码),qrCode(二维码),datamatrix,pdf417. success：接口调用成功的回调函数,回调成功参

small / 0评论 2019-09-08

python3转换code128条形码的方法

这货官方文档貌似都没写到支持 Code128 ，但是居然有这个类。。。。一些喷墨打印机，如果质量差一点的话，喷出来的条码，会沾到一起，不好识别。而用 pystrich 的话，会发觉宽度无法调节。那是因为，这东西得转换后，才能打印啊。。。以上所述是小编给大家

hzx0 / 0评论 2019-04-17

python3转换ITF25（交叉25）条形码

继上篇的python3转换code128条形码之后，发现，由于code128密度太高，依然无法清晰打印。迫于无奈，只能选择这个密度低的条形码，就是：交叉25码。这字库不好找啊。推荐：地址1 地址2 地址3. 要用括号包裹，用于标识开始和结束每2个数字分割一

amazingbo / 0评论 2019-07-01

python3转换code128条形码

干货不敢私藏，赶紧分享给大家。这年头如果用python3做条形码的，肯定（推荐）用pystrich。这货官方文档貌似都没写到支持Code128，但是居然有这个类。。。。一些喷墨打印机，如果质量差一点的话，喷出来的条码，会沾到一起，不好识别。而用pystri

晓杰0 / 0评论 2019-07-01

jquery条形码生成插件

http://barcode-coder.com/en/barcode-jquery-plugin-201.html

愚盦 / 0评论 2012-09-12

IOS7使用原生API进行二维码和条形码的扫描

IOS7之前，开发者进行扫码编程时，一般会借助第三方库。常用的是ZBarSDK，IOS7之后，系统的AVMetadataObject类中，为我们提供了解析二维码的接口。经过测试，使用原生API扫描和处理的效率非常高，远远高于第三方库。// Do any a

小狼驿站 / 0评论 2016-07-26

Zxing 条形码、二维码简化源码

Zxing 条形码、二维码简化源码

yangfangjit / 0评论 2014-02-25

基于google Zxing实现二维码、条形码扫描，仿微信二维码扫描效果

了解二维码这个东西还是从微信中，当时微信推出二维码扫描功能，自己感觉挺新颖的，从一张图片中扫一下竟然能直接加好友，不可思议啊，那时候还不了解二维码，呵呵，然后做项目的时候，老板说要加上二维码扫描功能，然后自己的屁颠屁颠的去百度，google啥的，发现很多朋

85580695 / 0评论 2013-09-02

二维码、条形码扫描——使用Google ZXing

我在项目中用到了二维码扫描的技术，用的是Google提供的ZXing开源项目，它提供二维码和条形码的扫描。扫描条形码就是直接读取条形码的内容，扫描二维码是按照自己指定的二维码格式进行编码和解码。其中encoding包是我 在它的基础上自己加上去的，功能是根

85580695 / 0评论 2013-07-17

Android的二维码扫码应用

在企业应用中可能某一些情况，需要二维码扫码，大多数采用的开源组件zxing实现。最近的Widget项目用到需要用摄像头来处理条形码，章师兄推荐了ZXing这个开源的项目，于是做一简单的调研。ZXing是一个开源Java类库用于解析多种格式的1D/2D条形码

87284155 / 0评论 2012-07-23

android条形码编解码

里面的例子只支持横屏模式下，要支持竖屏得对其进行修改。

87497718 / 0评论 2012-03-20

android 条形码的应用

扫描和识别条形码的android支持库android支持扫描条形码。不过手里没有真机，无法理解该功能是一个应用，还是一个可API调用的功能。不过在网上找到一个免费开源的android处理条形码的库。已经有java的第三方开源条形码识别库了，在自己的应用中扫

87497718 / 0评论 2012-02-19

利用Zxing解析条形码图片(from office website)

G:\Downloads\ZXing-1.6\zxing-1.6>java -cp javase\javase.jar;core\core.jar com.go

87497718 / 0评论 2012-02-09

在Android上使用ZXing识别条形码/二维码

越来越多的手机具备自动对焦的拍摄功能，这也意味着这些手机可以具备条码扫描的功能.......手机具备条码扫描的功能，可以优化购物流程，快速存储电子名片(二维码)等。本文使用ZXing 1.6实现条码/二维码识别。ZXing是个很经典的条码/二维码识别的开源

85580695 / 0评论 2011-11-20

条形码 zxing工具

最近的Widget项目用到需要用摄像头来处理条形码，章师兄推荐了ZXing这个开源的项目，于是做一简单的调研。ZXing是一个开源Java类库用于解析多种格式的1D/2D条形码。目标是能够对QR编码、DataMatrix、UPC的1D条形码进行解码。其提供

85580695 / 0评论 2011-01-04

Zxing调研

最近的Widget项目用到需要用摄像头来处理条形码，章师兄推荐了ZXing这个开源的项目，于是做一简单的调研。ZXing是一个开源Java类库用于解析多种格式的1D/2D条形码。目标是能够对QR编码、DataMatrix、UPC的1D条形码进行解码。其提供

Litchi / 0评论 2009-03-31

荣耀手表S1怎么使用支付宝支付功能?

荣耀手表S1支持支付宝支付，本次经验将详解荣耀手表S1的支付宝功能，只有更详细，没有最详细。支付宝app Android版本9.9.5于10月25日在华为应用市场首发，请检查支付宝版本号，如需更新，请卸载旧版本后前往华为应用市场下载。

hushijiao / 0评论 2016-10-22

jZebra 1.3.5发布 条形码打印的Applet

下载地址：http://code.google.com/p/jzebra/downloads/list

技术服务生活 / 0评论 2012-03-19

Python之ReportLab绘制条形码和二维码的实例

# code93 also has an Extended and MultiWidth version

MOSCAR / 0评论 2018-01-15

用 Python 和 OpenCV 检测图片上的条形码

我所实现的算法本质上基于StackOverflow 上的这个问题，浏览代码之后，我提供了一些对原始算法的更新和改进。17~18行：使用Scharr操作构造灰度图在水平和竖直方向上的梯度幅值表示。21~22行：Scharr操作之后，我们从x-gradient

lishenglong / 0评论 2015-08-09

Android二维码条形码生成

最近项目需要生成条形码与二维码，找了好久，终于找到了适合工程，扒到没用的代码。做个精简的，现在分享下。准备目前Google的zxing jar包不支持中文码的生成，所以本示例中也不支持中文。需要中文支持的朋友，请自行修改zxing.jar包再编译下。/**

易辰Android / 0评论 2013-03-17

PHP5生成条形码的简单实例

在使用前注意要将PHP的GD模块开启。在Windows中为php_gd2.dll，Linux中为gd.so。PHP5生成条形码见下图：。当然，这个PHP5生成条形码程序只是将文字生成为条形码，但使用时不能灵活将其嵌入其他PHP程序，我将压缩包里面的test

飞空静渡 / 0评论 2009-07-30

条形码/二维码之开源利器ZXing图文介绍

基本介绍 二维码的编码和解码演示 条形码的编码和解码演示 、 基本介绍 ：。1-1. ZXing是一个开源Java类库用于解析多种格式的条形码和二维码.1-2. 本文和之前的那篇文章一样，主要是在PC上实现条形码和二维码 的编码和解码的示例，以供大家参考，

Litchi / 0评论 2012-08-16

python利用elaphe制作二维条形码实现代码

get_barcode 用python，一切变得那么简单！

Python探路者 / 0评论 2012-05-25

php实现生成code128条形码的方法详解

本文实例讲述了php实现生成code128条形码的方法。分享给大家供大家参考，具体如下：

PHP100 / 0评论 2019-03-28

PHP生成条形码大揭秘

常见的条形码是由反射率相差很大的黑条（简称条）和白条（简称空）排成平行线的图案。打印出来的优惠券，商家需要用验证器读取条形码，来获得其有效性。首先找到强大的开源资料，在barcode官网下载barcodegen.1d-php5.v5.0.1.zip版本，然

PHP100 / 0评论 2019-03-28

食品上面的条形码是干嘛的？看我用Open CV来检测一下！

从冻伤的家庭在寒风中露营整晚，到瞒姗老太在大门打开后被蜂拥而入的低价抢购人群踩踏，就像侏罗纪公园中似鸡龙的蹂躏。这所有的一切只是因为她想为9岁的孙女蒂米买到最新的光晕游戏，而蒂米的父母，在去年的这个时候离世了，就在沃尔玛，在这黑色星期五。这篇博文的目的是应

云健身 / 0评论 2018-05-17

条形码战士蛇哥实锤新证据: 鼠标未动镜头瞬转180°

卢本伟停播后斗鱼目前人气颇高的主播蛇哥也引来了重重质疑声，一切都要从那个15倍镜压枪开始说起。15倍镜压枪扫车的这个事情还未结束，近期蛇哥在直播中的一次操作又引来了更多的质疑——180°镜头瞬转。这个动图是笔者自己制作的，这些视频大家也可以在网上随意的翻找

璞琳说法 / 0评论 2017-12-27

分享式商业模型

好久没翻译了，又读到一篇很有启发意义的文章。看标题像是一个讲商业模式的枯燥文章，其实没那么严肃，只是分享点故事:)。关于商业，我感觉自己几乎一无所知。因为，我曾经唯一做过的生意是一种「合作/分享」式商业模型。结束，这就是全部了。版权申请表1994 年，美国

互联网与你我的世界 / 0评论 2017-12-10

生成EAN13标准的条形码的ASP代码实例

if len<>13 then response.write "必须为13位!response.write "必须为数字码!if 10- <> int then response.write "此条码错

软件设计 / 0评论 2017-05-24

手把手教你做超酷的条形码效果第1/3页

旨在使对HTML, JavaScript，PhotoShop具有入门级水平的人巩固入门级水平。按一下D，再按一下X，确保前景色为白色背景色为黑色。使用Ctrl+Delele，填充背景色，黑色。画成下面这种效果：screen.width*0.7) {this

BAT 批处理程序 / 0评论 2017-04-25