🤝 👊🏼 🎅🏿 जावास्क्रिप्ट बारकोड स्कैनर का अवलोकन 🌎 👩🏼‍💼 🎢

हाल ही में, एक गोदाम में टीएसडी को बचाने और इसके बजाय साधारण सस्ते मोबाइल फोन (यहां तक कि धूल संरक्षण के बिना) का उपयोग करने का प्रयास करने के लिए एक विचार आया। मैं एक वेब एप्लिकेशन (नियमित वेब पेज, एचटीएमएल + सीएसएस + जेएस) के रूप में इंटरफ़ेस को लागू करने की योजना बना रहा हूं।

सब कुछ करने के लिए, आपको फ़ोन के कैमरे के माध्यम से बारकोड्स को स्कैन करने के लिए वेब पेज पढ़ाने की आवश्यकता है। कैमरे से डेटा प्राप्त करना काफी सरल है। मुख्य कार्य फ्रेम प्रसंस्करण है। एक बिल्ली के नीचे मौजूदा टर्नकी समाधानों और बहुत सारे चित्रों की समीक्षा है।

quaggaJS

संदर्भ:

खोज परिणामों में - यह पहला विकल्प है। पुस्तकालय चित्र में बारकोड खोज एल्गोरिथ्म से सुसज्जित है। एक आयामी बारकोड का समर्थन करता है: EAN, CODE 128, CODE 39, EAN 8, UPC-A, UPC-C, I2of5, 2of5, CODE 93, CODABAR। एनपीएम या बोवर के माध्यम से स्थापना का समर्थन करता है। लाइब्रेरी इंटरफ़ेस में 7 विधियों वाली एक Quagga ऑब्जेक्ट शामिल है, सब कुछ काफी सरल है।

प्रोजेक्ट वेबसाइट पर एक पृष्ठ है जहाँ आप नमूने डाउनलोड कर सकते हैं और कार्रवाई में लाइब्रेरी आज़मा सकते हैं। हम नमूना नंबर 1 की कोशिश करते हैं। कुछ सेटिंग्स को निर्दिष्ट करने की आवश्यकता है, ठीक है, कोई सवाल नहीं।

लॉन्च के परिणामस्वरूप, बारकोड निर्धारित करना संभव नहीं था, लेकिन बारकोड का स्थान अच्छी तरह से निर्धारित किया गया था।

हम नमूना नंबर 2 की कोशिश करते हैं। किसी तरह हर्षित।

हम सेटिंग बदलने की कोशिश कर रहे हैं - "पैच-आकार" -> "बड़े"। नहीं। सही रिज़ॉल्यूशन `रिज़ॉल्यूशन (लंबी साइड) = 800px` सेट करके दिया गया है। हालांकि, वास्तव में सबसे बड़ा पक्ष 640 पिक्सल है।

शायद यह उच्च-रिज़ॉल्यूशन छवियों के साथ बेहतर काम करता है। खैर, हम तीसरा नमूना बनाते हैं (नमूना नंबर 3)।

ईमानदारी से, मुझे नहीं पता कि यह किस प्रकार का बारकोड है और सभी सेटिंग्स की कोशिश की - मुख्यालय निर्धारित नहीं किया गया था। ठीक है, चलो एक और उच्च रिज़ॉल्यूशन नमूना (नमूना 4) आज़माएँ:

किसी कारण से, किसी भी सेटिंग के साथ परिणाम प्राप्त करना संभव नहीं था।

आइए निम्नलिखित पुस्तकालय से "स्वच्छ" नमूने का प्रयास करें (नमूना संख्या 5):

यह एक मान्यता थी।

जावास्क्रिप्ट-बारकोड रीडर

संदर्भ:

यह अंक में दूसरा पुस्तकालय है। ज्ञात प्रारूप: कोड128 (यूसीसी / ईएएन -128), कोड 93, कोड 39, 5 का मानक / औद्योगिक 2, 5 का इंटरलीव्ड 2, कोडबार, ईएएन -13। यह एनपीएम के माध्यम से इंस्टॉलेशन का समर्थन करता है, या आप इसे इस तरह कनेक्ट कर सकते हैं:

<script src="//unpkg.com/javascript-barcode-reader/dist/javascript-barcode-reader.min.js"></script>

या आप केवल एक फ़ाइल डाउनलोड कर सकते हैं: जावास्क्रिप्ट-बारकोड-रीडर.min.js आकार 10 445 बाइट्स।

परियोजना में उदाहरणों के साथ एक पृष्ठ है , लेकिन चित्र कोड उत्पन्न करके प्राप्त किए गए थे, और कैमरे से नहीं। यह हमारे काम नहीं आएगा।

पुस्तकालय के परीक्षण के लिए कोड

बारकोड scan.html

 <html> <head> <meta http-equiv="content-language" content="ru" /> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <script src="//unpkg.com/javascript-barcode-reader/dist/javascript-barcode-reader.min.js"></script> <script type="text/javascript" src="barcode-scan.js"></script> </head> <body onload='onLoadPage()'> <img id="img1" src="scan02.png" /> </body> </html>

बारकोड scan.html

 function onLoadPage() { Image = document.getElementById('img1'); javascriptBarcodeReader( Image /* Image ID || HTML5 Image || HTML5 Canvas || HTML5 Canvas ImageData || Image URL */, { barcode: 'EAN-13', // 'Code-39' type: 'industrial', //    "Code-2of5",   "industrial"  "Interleaved" } ) .then(code => { console.log(code) }) .catch(err => { console.log(err) }); }

नमूना नंबर 1। पुस्तकालय कंसोल के लिए आउटपुट "त्रुटि: बारकोड निकालने में विफल!"।
नमूना नंबर २। पुस्तकालय कंसोल के लिए आउटपुट "त्रुटि: बारकोड निकालने में विफल!"।
नमूना नंबर 3। पुस्तकालय कंसोल के लिए आउटपुट "त्रुटि: बारकोड निकालने में विफल!"।
नमूना नंबर ४। पुस्तकालय कंसोल के लिए "601" जारी करता है।

हम्म ... शायद लाइब्रेरी सही से कनेक्ट नहीं है? आइए इस नमूने की कोशिश करें:

नमूना नंबर ५। पुस्तकालय कंसोल के लिए "10023" जारी करता है। कूल।

डायनामसॉफ्ट बारकोड रीडर

परियोजना स्थल
लाइब्रेरी का मुख्य हिस्सा WebAssembly (WASM) और केवल जावास्क्रिप्ट रैपर में लिखा गया है, जो इतना दिलचस्प नहीं है। जानता है प्रारूप:

1 डी: कोड 39, कोड 93, कोड 128, कोडबार, ईएएन -8, ईएएन -13, यूपीसी-ए, यूपीसी-ई, 5 का इंटरलीव्ड 2 (आईटीएफ), 5 का औद्योगिक 2 (5 उद्योग का कोड 2), मानक 2 5 का, कोड 2 का 5), आईटीएफ -14;

2 डी: पीडीएफ 417, क्यूआर कोड, डेटामैट्रिक्स, एज़्टेक।

यह एक पेड लाइब्रेरी है, जो सब्सक्रिप्शन द्वारा उपलब्ध है, सभी प्रकार के बारकोड की कीमत प्रति वर्ष $ 2199 है , यदि केवल एक-आयामी कोड है, तो लागत प्रति वर्ष $ 1099 तक घट जाती है। प्रयोगों के लिए एक पेज 1 और एक पेज 2 है।

नमूना नंबर 1। हाँ! उत्तर सही है। क्षेत्र काफी स्पष्ट रूप से परिचालित है।

नमूना नंबर २। हां। उत्तर फिर से सही है। क्षेत्र भी काफी स्पष्ट रूप से परिचालित है।

नमूना नंबर 3। अब हम इस बारकोड के प्रकार को जानते हैं।

नमूना नंबर ४। उत्तर भी सही है।

और, जाहिर है, आप इसे पसंद कर सकते हैं:

हालाँकि, पहले नमूने को एक त्रुटि के साथ पहचाना गया था। और इस तरह से फिर से कोशिश करें ( मूल छवि बहुत धुंधली है ):

अब हम जानते हैं कि कम से कम एक काम करने वाला पुस्तकालय है, जो एक भुगतान किया हुआ है।

tobytailor get_barcode_from_image.js

संदर्भ:

एक साधारण सा पुस्तकालय। केवल एक बारकोड प्रारूप जानता है: UPC। यदि आप पहले इस प्रकार के कोड में शून्य जोड़ते हैं, तो आपको EAN-13 मिलता है।

हम पहले नमूने की कोशिश:

परिणाम: 000204892734. पैटर्न मान्यता प्राप्त है।

नमूना नंबर 2 (EAN-13) लें। बस काम करने के लिए, आपको इस तरह से स्क्रिप्ट की लाइन 32 लिखने की आवश्यकता है:

 ctx.drawImage(img, 0, 0, width, height); //  : ctx.drawImage(img, 0, 0);

परिणाम: XXXXXXXXXXXXX। नमूना पहचाना नहीं गया।

निम्नलिखित लें:

परिणाम: XXXXXXXXXXXXX। पहचाना नहीं गया।

चलो कुछ सरल कोशिश करते हैं:

परिणाम: मान्यता प्राप्त नहीं है। शायद उसे इस तरह से परोसा जाना चाहिए कि, बारकोड के अलावा, अतिरिक्त स्थान को छोड़कर, तस्वीर पर कुछ भी न हो।

परिणाम: 022334545453

और एक और EAN-13:

आंशिक रूप से मान्यता प्राप्त है।

एडी बारकोडरेडर

GitHub
लेखक की एक छोटी सी अपील के साथ एक और मुफ्त पुस्तकालय:

यदि आप व्यावसायिक उद्देश्यों के लिए इस परियोजना को पसंद करते हैं और / या उपयोग करते हैं, तो मेरे काम का समर्थन करने के लिए दान करने पर विचार करें।

यदि आप व्यावसायिक उद्देश्यों के लिए इस परियोजना को पसंद करते हैं और / या उपयोग करते हैं, तो मेरे काम का समर्थन करने के लिए दान करने पर विचार करें।

ज्ञात प्रारूप: कोड128, कोड 93, कोड 39, 5 का मानक / औद्योगिक 2, 5 का इंटरलीव्ड 2, कोडबार और ईएएन -13। प्रयोग के लिए एक पृष्ठ है।

नमूना नंबर 1। गुंजाइश और प्रकार को सही ढंग से परिभाषित किया गया है। कोड को एक त्रुटि के साथ पहचाना गया था।

नमूना नंबर २। अच्छा परिणाम है। सही ढंग से मान्यता प्राप्त: क्षेत्र, बारकोड का प्रकार और बारकोड ही।

नमूना नंबर 3। नकारात्मक। एक कोण पर, वह नहीं कर सकता

नमूना नंबर ४। बहुत अच्छा, पैटर्न पहचाना।

नमूना नंबर ५। पैटर्न मान्यता प्राप्त है।

खैर, सराहनीय है। पुस्तकालय में हाल के परिवर्तन 3 साल पहले हुए थे।

WebCodeCamJS

संदर्भ:

मुफ्त पुस्तकालय (एमआईटी लाइसेंस)। निम्नलिखित प्रकार के एक आयामी बारकोड को जानता है: कोड -128, कोड -93, कोड -39, कोडबार, ईएएन -13। क्यूआर कोड पहचानने में सक्षम। प्रोजेक्ट पेज पर लाइब्रेरी को आज़माने का अवसर है।

नमूना नंबर 1: मान्यता प्राप्त नहीं है।

नमूना नंबर 2: सही ढंग से पहचाना गया।

नमूना नंबर 3: मान्यता प्राप्त नहीं है।
नमूना नंबर 4: मान्यता प्राप्त नहीं है।
नमूना नंबर 5: सही ढंग से पहचाना गया।

QR कोड को पहचानने की क्षमता दिलचस्प लगती है, इसलिए मैंने इसके और बाद के पुस्तकालयों के परीक्षण के लिए 6 नमूने एकत्र किए:

नमूना नंबर 1: कुछ भी नहीं।
नमूना नंबर 2: कुछ भी नहीं।
नमूना 3: कुछ भी नहीं।
नमूना 4: कुछ भी नहीं।
नमूना नंबर 5: कुछ भी नहीं।
नमूना नंबर 6: मान्यता प्राप्त।

वेब क्यूआर

प्रोजेक्ट पेज
नि: शुल्क पुस्तकालय। क्यूआर कोड की पीढ़ी और मान्यता की घोषणा की। प्रोजेक्ट पेज पर लाइब्रेरी को आज़माने का अवसर है।

छह नमूनों में से किसी को भी मान्यता नहीं दी गई। पृष्ठ पर एक क्यूआर-कोड जनरेटर है, यहां इस जनरेटर का उपयोग करके प्राप्त किए गए कोड मान्यता प्राप्त हैं।

युपीडी। साथ में, टिप्पणियों में ( TiesP के लिए धन्यवाद), यह स्थापित करना संभव था कि एल्गोरिथ्म काम करता है, बस कोड के अभिविन्यास को निर्धारित करने का तरीका नहीं जानता है। इसे ध्यान में रखते हुए, नए परिणाम इस प्रकार हैं:
नमूना नंबर 1 - मान्यता प्राप्त नहीं है।
नमूना नंबर 2 - मान्यता प्राप्त नहीं है।
नमूना नंबर 3 - मान्यता प्राप्त नहीं है।
नमूना नंबर 4 - मान्यता प्राप्त नहीं है।
नमूना नंबर 5 - मान्यता प्राप्त।
नमूना नंबर 6 - मान्यता प्राप्त।

जाहिरा तौर पर अभी भी पृष्ठभूमि पर कुछ प्रतिबंध हैं, क्योंकि मेरे नमूने और टिप्पणियों में प्रदान किए गए दोनों नमूने कागज पर निर्धारित किए गए थे:

संपूर्ण

यह सब मुझे मिला। उदाहरण के लिए, उपरोक्त में से एक के आधार पर कई कार्यान्वयन मिले। मैं दोहराता हूं कि मुख्य खोज मानदंड यह है कि सभी काम क्लाइंट साइड पर एक ब्राउज़र के माध्यम से और बिना किसी अतिरिक्त स्थापना के किए जाने चाहिए। यही है, समाधान को जावास्क्रिप्ट और / या वासम में लागू किया जाना चाहिए (इसलिए ZBar उपयुक्त नहीं है)।

यदि आप एक पुस्तकालय जानते हैं जो इन आवश्यकताओं को पूरा करता है और लेख में नहीं है, तो कृपया सूचित करें।

परिणामी लाइब्रेरी रेटिंग इस प्रकार है:

लेख ऑनलाइन लाइटिंग स्टोर डिवाइन लाइट की बदौलत हुआ ।

जावास्क्रिप्ट बारकोड स्कैनर का अवलोकन

quaggaJS

जावास्क्रिप्ट-बारकोड रीडर

डायनामसॉफ्ट बारकोड रीडर

tobytailor get_barcode_from_image.js

एडी बारकोडरेडर

WebCodeCamJS

वेब क्यूआर

संपूर्ण

More articles: