使用JavaScript根據圖片獲取條形碼的方法

來源：懂視網責編：小采時間：2020-11-27 19:34:25

使用JavaScript根據圖片獲取條形碼的方法

使用JavaScript根據圖片獲取條形碼的方法:本文重點給大家介紹JavaScript識別圖片中的條形碼，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的的朋友參考下吧最近在弄一個零售超市的項目，但是苦于需要自己錄入數據，超市少的也有1000多種商品，自己一個一個錄入肯定不太現實，所以考慮掃描商品的條

推薦度：

點擊下載本文 文檔為doc格式

導讀使用JavaScript根據圖片獲取條形碼的方法:本文重點給大家介紹JavaScript識別圖片中的條形碼，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的的朋友參考下吧最近在弄一個零售超市的項目，但是苦于需要自己錄入數據，超市少的也有1000多種商品，自己一個一個錄入肯定不太現實，所以考慮掃描商品的條

本文重點給大家介紹JavaScript識別圖片中的條形碼，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的的朋友參考下吧

最近在弄一個零售超市的項目，但是苦于需要自己錄入數據，超市少的也有1000多種商品，自己一個一個錄入肯定不太現實，所以考慮掃描商品的條形碼，根據條形碼獲取商品的信息這樣效率就高多了。

根據條形碼獲取商品信息這個在網上有很多api一般都是付費的費用不高，可以直接拿來用，這里就略過了。

這里重點說說JavaScript識別圖片中的條形碼。

開源庫quaggaJS

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

這里要感謝大神提供這么牛B的js庫，讓我的想法得以實現！

這個庫的使用方式也非常簡單，在github上有很豐富的講解，但是我只使用了其中一個掃描條形碼圖片，獲取條形碼的功能，所以我就直接把我需要的功能列舉一個例子，有其他的需求的可以去上面的連接里面找。

頁面部分

<html>
<body>
<section id="container" class="container">
 <p class="controls">
 <fieldset class="input-group">
 <input type="file" accept="image/*;capture=camera">
 <button>Rerun</button>
 </fieldset>
 </p>
 <p id="result_strip">
 <ul class="thumbnails"></ul>
 </p>
 <p id="interactive" class="viewport"><canvas class="imgBuffer" width="800" height="566"></canvas><canvas class="drawingBuffer" width="800" height="566"></canvas><br clear="all"></p>
</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><p class="thumbnail"><p class="imgWrapper"><img /></p><p class="caption"><h4 class="code"></h4></p></p></li>');
 $node.find("img").attr("src", canvas.toDataURL());
 $node.find("h4.code").html(code);
 $("#result_strip ul.thumbnails").prepend($node);
 });
 }
 });
});

效果展示