當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
使用quaggaJS识别图片中的条形码
生活随笔
收集整理的這篇文章主要介紹了
使用quaggaJS识别图片中的条形码
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
使用quaggaJS識別圖片中的條形碼
quaggaJS是一個純JS的插件，用于識別圖片中的條形碼，很方便。一般用于移動端拍照識別，也可以在網頁端上傳圖片識別。
github下載地址?
首先要指定正確格式的條形碼，常見的條形碼編碼類型有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识别图片中的条形码的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： select的执行顺序
- 下一篇： python计算连续复利_复利的Pyth