使用quaggaJS識別圖片中的條形碼

阿新 • • 發佈：2019-01-16

quaggaJS是一個純JS的外掛，用於識別圖片中的條形碼，很方便。一般用於移動端拍照識別，也可以在網頁端上傳圖片識別。

首先要指定正確格式的條形碼，常見的條形碼編碼型別有EAN和CODE128。

另外，並不是所有圖片中的條形碼都可以被識別出來，而且正確率也不是100%。

下面是識別網頁上傳圖片中條碼的方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
< 
body>
<section id="container" class="container">
 <div class="controls">
   <fieldset class="input-group">
     <input type="file" accept="image/*;capture=camera">
        <button id="btnIdents">識別</button>
   </fieldset>
 </div>
 <div id="interactive" 
 class="viewport"><br clear="all"></div>
</section>
<script src="https://cdn.bootcss.com/jquery/2.0.3/jquery.js" type="text/javascript"></script>
<script src="./js/quagga.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="./css/fileinput.css" 
>
<script src="./js/file_input.js" type="text/javascript"></script>
<script type="text/javascript">
    
$(function() {var App = {
        init: function() {
            App.attachListeners();
        },
        attachListeners: function() {
            var self = this;
            $("#btnIdents").on("click", function(e) {
                var input = document.querySelector(".controls input[type=file]");
                if (input.files && input.files.length) {
                    App.decode(URL.createObjectURL(input.files[0]));
                }
            });
        },
        decode: function(src) {
            var self = this,
                config = $.extend({}, self.state, {src: src});
            Quagga.decodeSingle(config, function(result) {
                //識別結果
                if(result.codeResult){
                    console.log(result.codeResult.code);
                    alert("圖片中的條形碼為：" + result.codeResult.code);
                }else{
                    alert("未識別到圖片中的條形碼！");
                }
            });
        },
        state: {
            inputStream: {
                size: 800,
                singleChannel: false
            },
            locator: {
                patchSize: "medium",
                halfSample: true
            },
            decoder: {
                readers: [{
                    format: "code_128_reader",
                    config: {}
                }]
            },
            locate: true,
            src: null
        }
    };

    App.init();
});
</script>
</body>
</html>

執行效果

補充：上面的程式碼主要是參考了官方的demo，後來又按自己的習慣寫了一遍，也貼上來。執行效果是一樣的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<section id="container" class="container">
 <div class="controls">
   <fieldset class="input-group">
     <input type="file" accept="image/*;capture=camera">
        <button id="btnIdents">識別</button>
   </fieldset>
 </div>
 <div id="interactive" class="viewport"><br clear="all"></div>
</section>
<script src="https://cdn.bootcss.com/jquery/2.0.3/jquery.js" type="text/javascript"></script>
<script src="./js/quagga.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="./css/fileinput.css">
<script src="./js/file_input.js" type="text/javascript"></script>
<script type="text/javascript">

 $(function() {
            $("#btnIdents").click(function() {
            var input = document.querySelector(".controls input[type=file]");
            if (input.files && input.files.length) {
                decode(URL.createObjectURL(input.files[0]));
            }
            });
});

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){
                    console.log("圖片中的條形碼為："+result.codeResult.code);
                    alert("圖片中的條形碼為：" + result.codeResult.code);
                }else{
                    alert("未識別到圖片中的條形碼！");
                }
       });
}

</script>
</body>
</html>

另外，如果不是檔案上傳的話，可以傳圖片的url進行識別。

        function decode(img_url) {
            var config = {
                readers: ["code_128_reader"],
                locate: true,
                src : img_url
            }
            Quagga.decodeSingle(config, function (result) {
                console.log("decoding...");
                if (!result) {
                    console.log("圖片中沒有條形碼！");
                    return false;
                }
                //識別結果
                if (result.codeResult) {
                    console.log("圖片中的條形碼為：" + result.codeResult.code);
                } else {
                    console.log("未識別到圖片中的條形碼！");
                }
            });
        }

使用quaggaJS識別圖片中的條形碼

quaggaJS是一個純JS的外掛，用於識別圖片中的條形碼，很方便。一般用於移動端拍照識別，也可以在網頁端上傳圖片識別。首先要指定正確格式的條形碼，常見的條形碼編碼型別有EAN和CODE128。另外，並不是所有圖片中的條形碼都可以被識別出來，而且正確率也不是100%。下面是識別網頁上傳圖片中條碼的方法

借助百度OCR，實現一鍵識別圖片中文字，就是這麽酷！

mage src 百度文字身份證公眾分享圖片目前增加轉眼已是淩晨兩點，還好通過java根據百度提供的OCR接口，實現了一個有趣的小應用：一鍵識別圖片中文字經過一個小時的反復測試，沒想到識別確實很高，而且，居然還可以識別稍微復雜的驗證碼比如：主要為了

識別圖片中的二維碼

csb 但是 ray hicsg nco graphics 截圖 get war //截圖再讀取 UIGraphicsBeginImageContextWithOptions(currentImageView.bounds.size, YES, 0);/

深入學習使用ocr算法識別圖片中文字的方法

() 圖片文字圖像增強 ota lan 必須動態 index rar 　　公司有個需求，簡單點說需要從一張圖片中識別出中文，通過python來實現，當然其他程序也行，只要能實現，而小編主要學習python，所以就提了python。一個小白在網上遨遊了一天，終於找到一絲絲

如何通過迅捷OCR文字識別軟體精準識別圖片中的文字

　　怎樣精準的將圖片中的文字識別出來呢？相信這是很多人的煩惱，因為我們經常會遇到文字識別的時候，使用到的方法也有很多，但是很多方法識別出來的效果不是很好，需要對比著原圖去改正，這就很令人煩惱了。下面小編將分享一種在圖片文字識別軟體中精準提取文字的方法，一起來學習下。　　步驟一、文字識別的話需要使用到工具，

如何通過迅捷OCR文字識別軟件精準識別圖片中的文字

提取技術分享圖片文字 term 圖片局部自動 color 通過 img 怎樣精準的將圖片中的文字識別出來呢？相信這是很多人的煩惱，因為我們經常會遇到文字識別的時候，使用到的方法也有很多，但是很多方法識別出來的效果不是很好，需要對比著原圖去改正，這就很令人煩惱了。下面小

[Xcode10 實際操作]七、檔案與資料-(20)CoreML機器學習框架：檢測和識別圖片中的物體

本文將演示機器學習框架的使用，實現對圖片中物體的檢測和識別。首先訪問蘋果開發者網站關於機器學習的網址： https://developer.apple.com/cn/machine-learning/ 點選右側的滾動條，跳轉到模型知識區域。點選頁面最下方的【Learn about working

python使用tesserocr識別圖片中文字報RuntimeError: Failed to init API, possibly an invalid tessdata path: C:\\錯誤

python使用tesserocr識別圖片中文字時總會報錯誤：RuntimeError: Failed to init API, possibly an invalid tessdata path: C:\ 錯誤的意思是：初始化API失敗，可能是在路徑C:\下存

如何識別圖片中的表格資料

在很多時候，我們的資料來源形式是多種多樣的，有時候資料（或表格）也會呈現在圖片中。那麼，我們如何來獲取圖片中的有用資料呢？當一張圖片中含有表格資料的時候，我們可以用OpenCV識別表格中的直線，然後再用OCR技術識別其中的文字。本文僅作為如何識別圖片中的表格的一個例子，希望能給讀者一些啟示。筆者用到

如何識別圖片中的表格數據

視覺 numpy 濾波均值 sel canny 醫療平安可能 ??在很多時候，我們的數據來源形式是多種多樣的，有時候數據（或表格）也會呈現在圖片中。那麽，我們如何來獲取圖片中的有用數據呢？當一張圖片中含有表格數據的時候，我們可以用OpenCV識別表格中的直線，然後再用

利用Google Object Detection模組識別圖片中的物體

筆者環境win1064位 1.anaconda python 3.5 64為安裝包 2.安裝tensflow1.0 第一部分（圖片物體識別） 1.下載tensflow的原始碼包，並解壓 2.下載 Protoc protoc-3.4.0-win32.

Python使用OCR技術識別圖片中的文字（入門篇）

首先下載並安裝tesseract-ocr軟體，然後使用pip install pytesseract和pip install pillow安裝擴充套件庫。接下來準備一個圖片，裡面寫點文字，例如：測試程式碼：從測試結果來看，即使是圖片中只包含英文，識別率也不是百分之百的準確，但是已經不錯了，後面

[影象識別] java語言使用tess4j識別圖片中的文字

之所以寫下這篇文章，是因為在實踐中使用時，發現在識別整張圖時，準確率降低。尤其是中文，英文，字元，數字，水印都有的時候。出錯率很高。原先一直認為是水印的問題。結果將圖片二值化以後，沒有水印，識別準確度依舊很低。偶然的情況，使用區域性區域識別，發現，效果很好，

python 包的使用（二）——tesseract識別圖片中的文字

安裝過程pytesser 呼叫了 tesseract，因此需要安裝 tesseract，安裝 tesseract 需要安裝 leptonica，否則編譯tesseract 的時候出現 "configure: error: leptonica not found"。sudo apt-get install te

python使用pytesseract識別圖片中的文字

在python爬蟲時，可能會遇到需要抓取驗證碼，識別圖片中的文字等，python也確實提供了這個功能。下面便是步驟： 1. 下載Tesseract-OCR,下載地址為：tesseract下載地址，下載之後下一步下一步傻瓜式安裝即可。隨後將其新增到

批量識別圖片中文字（python、百度開發者工具）

進來一直為各種課程的實驗報告困擾，字數很多，百度文庫、豆瓣等資源網站又無法免費下載。就想著如果我能把他們截圖下來，然後批量轉換成文字該多好呢？所謂懶惰是人類進步的階梯。筆者決定通過python程式，呼叫百度api完成這項功能。認證百度開發者首先要在百度開發者平臺認證成為百度開

iOS AVCaptureSession實現獲取攝像頭影象，並識別圖片中身份證號碼

自定義照相機通過裝置攝像頭實時獲取身份證圖片資訊，然後識別圖片中身份證號碼，採用ocr識別數字宣告 import import import import “MBProgressHUD.h” //#import “Tesseract.h”

python--識別圖片中的文字

本篇文章主要參考了 python影象處理之識別影象中的文字這篇文章，在實現的過程中出現了些偏差，特此記錄。因為此時筆者不是第一次安裝，所展示的結果會和首次安裝的結果有所差別。 1.安裝PIL 以管理員的身份開啟命令提示符，輸入：pip install pillow.

用cnn構建多層神經網絡來識別mnist中的圖片

argv padding out load 神經網絡 dir sco ack import mnist.py import tensorflow as tf import numpy as np import argparse import sys import urll

在迅捷OCR文字識別軟體中怎麼進行圖片區域性識別

　　怎麼進行圖片區域性識別呢？我們在觀看一些圖片的時候，有些圖片上的文字我們會需要將區域性文字識別提取出來，但是如何去識別呢，藉助圖片文字識別軟體就可以幫助實現了，下面為大家講解下具體的操作方法。　　使用工具：迅捷OCR文字識別軟體。　　1：先在電腦中將需要使用到的文字識別軟體下載裝好，接著儲存一張我

使用quaggaJS識別圖片中的條形碼

相關推薦