使用JavaScript根據圖片獲取條形碼的方法
更新時間：2017年07月04日 17:14:17 作者：一抹丶陽
本文重點給大家介紹JavaScript識別圖片中的條形碼，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的的朋友參考下吧
最近在弄一個零售超市的項目，但是苦于需要自己錄入數據，超市少的也有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根據圖片獲取條形碼的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
這篇文章主要介紹了JavaScript涉及二進制的轉換方式，具有很好的 參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了微信小程序自定義彈窗實現詳解(可通用）,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-07-07
ECharts是一個強大的數據可視化庫,它的堆疊柱狀圖通常用于比較各個分類的數據總量,這篇文章主要給大家介紹了echarts堆疊柱狀圖柱子之間間隔開具體實現的相關資料,需要的朋友可以參考下2024-11-11
這篇文章主要為大家詳細介紹了可拖拽組件slider.js的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
本文通過示例代碼給大家介紹了js中的閉包，非常不錯，具有參考借鑒價值，感興趣的朋友一起看看吧2017-10-10
JavaScript實現簡易購物車最全代碼解析(ES6面向對象)
這篇文章主要為大家詳細介紹了JavaScript實現簡易購物車最全代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
本文主要介紹了提高數據訪問速度的方法，具有很好的參考作用，需要的朋友一起來看下吧2016-12-12
UTC格式時間想必大家并不陌生，那么怎么可以將其轉換為本地格式呢？其實很簡單，下面的方法會幫助大家實現這一想法2013-09-09
這篇文章主要介紹了Promise掃盲貼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-06-06
使用Sticky組件實現帶sticky效果的tab導航和滾動導航的方法
sticky組件，通常應用于導航條或者工具欄，當網頁在某一區(qū)域滾動的時候，將導航條或工具欄這類元素固定在頁面頂部或底部，方便用戶快速進行這類元素提供的操作2016-03-03