本篇文章給大家分享的是有關利用JavaScript怎么根據圖片獲取條形碼，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
頁面部分
<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"><h5 class="code"></h5></div></div></li>');
$node.find("img").attr("src", canvas.toDataURL());
$node.find("h5.code").html(code);
$("#result_strip ul.thumbnails").prepend($node);
});
}
});
});以上就是利用JavaScript怎么根據圖片獲取條形碼，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
