使用JavaScript根據(jù)圖片獲取條形碼的方法
最近在弄一個零售超市的項目,但是苦于需要自己錄入數(shù)據(jù),超市少的也有1000多種商品,自己一個一個錄入肯定不太現(xiàn)實,所以考慮掃描商品的條形碼,根據(jù)條形碼獲取商品的信息這樣效率就高多了。
根據(jù)條形碼獲取商品信息這個在網(wǎng)上有很多api一般都是付費的費用不高,可以直接拿來用,這里就略過了。
這里重點說說JavaScript識別圖片中的條形碼。
開源庫quaggaJS
項目地址:https://github.com/serratus/quaggaJS
這里要感謝大神提供這么牛B的js庫,讓我的想法得以實現(xiàn)!
這個庫的使用方式也非常簡單,在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根據(jù)圖片獲取條形碼的方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
微信小程序使用自定義組件導(dǎo)航實現(xiàn)當(dāng)前頁面高亮
這篇文章主要介紹了微信小程序使用自定義組件導(dǎo)航實現(xiàn)當(dāng)前頁面高亮,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01全面解析JavaScript中的valueOf與toString方法(推薦)
本文給大家介紹JavaScript中的valueOf與toString方法,valueOf() 方法可返回 Boolean 對象的原始值,toString() 方法可把一個邏輯值轉(zhuǎn)換為字符串,并返回結(jié)果。對js中valueof和tostring相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-06-06javascript實現(xiàn)鼠標(biāo)拖動改變層大小的方法
這篇文章主要介紹了javascript實現(xiàn)鼠標(biāo)拖動改變層大小的方法,涉及javascript操作鼠標(biāo)事件及樣式的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-04-04JS Jquery 遍歷,篩選頁面元素 自動完成(實現(xiàn)代碼)
本篇文章是對JS Jquery 遍歷,篩選頁面元素 自動完成的實現(xiàn)代碼進(jìn)行了詳細(xì)的分析介紹,需要的朋友參考下2013-07-07小程序使用watch監(jiān)聽數(shù)據(jù)變化的方法詳解
這篇文章主要介紹了小程序使用watch監(jiān)聽數(shù)據(jù)變化的方法詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-09-09