जावास्क्रिप्ट छवि एनोटेशन के लिए एनोटोरियस लाइब्रेरी
जावास्क्रिप्ट में एनोटोरियस लाइब्रेरी का उपयोग करके वेब पेजों में छवियों में चित्र, टिप्पणियाँ और लेबल जोड़ें।
एनोटोरियस क्या है?
एनोटोरियस एक ओपन सोर्स इमेज एनोटेशन लाइब्रेरी है जो जावास्क्रिप्ट में लिखी गई है जो छवि के वांछित स्थानों पर आकृतियाँ बनाकर ब्राउज़र के भीतर छवियों पर एनोटेशन जोड़ने की अनुमति देती है। जब भी एनोटेशन के लिए कोई आकृति बनाई जाती है, तो यह टिप्पणियाँ जोड़ने और टैग जोड़कर एनोटेशन को लेबल करने के लिए एक पॉपअप भी खोलता है। लाइब्रेरी मौजूदा एनोटेशन में उत्तर जोड़ने और आवश्यकता पड़ने पर उन्हें हटाने का भी समर्थन करती है।
एनोटोरियस लाइब्रेरी द्वारा समर्थित कुछ विशेषताएं नीचे सूचीबद्ध हैं:
- आकृतियाँ बनाएँ: एनोटोरियस उपयोगकर्ताओं को छवियों पर आयत, वृत्त, दीर्घवृत्त और मुक्तहस्त एनोटेशन जैसी आकृतियाँ बनाने में सक्षम बनाता है।
- टिप्पणियाँ और नोट्स: उपयोगकर्ता एनोटोरियस का उपयोग करके किसी छवि के विशिष्ट भागों में कस्टम टिप्पणियाँ और नोट्स जोड़ सकते हैं।
- लेबलिंग या टैगिंग: एनोटोरियस एक छवि के भीतर विभिन्न क्षेत्रों या वस्तुओं को एनोटेट करने के लिए लेबल या टैग जोड़ने की क्षमता का समर्थन करता है।
- एकीकरण: एनोटोरियस को आसानी से वेब पेजों और वेबसाइटों में एकीकृत किया जा सकता है, जिससे निर्बाध एनोटेशन कार्यक्षमता प्राप्त होती है।
- अनुकूलन: लाइब्रेरी आपकी आवश्यकताओं के अनुरूप एनोटेशन के स्वरूप और व्यवहार को अनुकूलित करने के लिए विकल्प प्रदान करती है।
- संगतता: एनोटोरियस विभिन्न वेब ब्राउज़रों और प्लेटफार्मों के साथ अच्छी तरह से काम करता है, जिससे यह विभिन्न वातावरणों के लिए बहुमुखी बन जाता है।
एनोटोरियस के साथ शुरुआत करना
एनोटोरियस प्राप्त करने और अपने वेब प्रोजेक्ट्स में इसका उपयोग शुरू करने के तीन तरीके हैं।
1. NPM का उपयोग करके इंस्टॉल करें
Node.js स्थापित करने के बाद, नीचे दिया गया आदेश चलाएँ:
एनपीएम का उपयोग करके एनोटोरियस स्थापित करें
npm install @recogito/annotorious
2. CDN के माध्यम से होस्ट की गई लाइब्रेरी का उपयोग करें
एनोटोरियस को निःशुल्क CDN सर्वर पर भी होस्ट किया गया है और आप नीचे दिए गए URL का उपयोग कर सकते हैं:
- जेएस: https://cdn.jsdelivr.net/npm/@recogito/annotorious@2.7.10/dist/annotorious.min.js
- सीएसएस: https://cdn.jsdelivr.net/npm/@recogito/annotorious@2.7.10/dist/annotorious.min.css
3. पूर्व-निर्मित रिलीज़ का उपयोग करें
GitHub से Annotorious का प्री-बिल्ट लेटेस्ट रिलीज़ डाउनलोड करें। ज़िप्ड रिलीज़ को निकालने के बाद, आपको नीचे दी गई फ़ाइलें दिखाई देंगी (जहाँ annotorious.min.css और annotorious.min.js का इस्तेमाल वेबसाइट में इमेज एनोटेशन के लिए किया जाएगा):
- annotorious.min.css
- annotorious.min.js
- annotorious.umd.js.map
- recogito-पॉलीफिल्स.js
छवियों में एनोटेशन जोड़ें
यदि हम पहले से निर्मित रिलीज़ डाउनलोड करते हैं, तो हमें annotorious.min.css और annotorious.min.js फ़ाइलें मिलती हैं जिन्हें Annotorious JavaScript लाइब्रेरी को एकीकृत करने के लिए हेड टैग में वेबसाइट के साथ जोड़ा जा सकता है। इमेज एनोटेशन लाइब्रेरी एकीकृत होने के बाद, हम एक ऐसी इमेज जोड़ सकते हैं जिस पर एनोटेशन जोड़ना है और अंत में हम इमेज में एनोटेशन जोड़ने के लिए Annotorious लाइब्रेरी को इनिशियलाइज़ करने के लिए JavaScript कोड लिख सकते हैं।
उपरोक्त कोड ब्राउज़र में केवल एनोटेशन के लिए तैयार एक छवि दिखाता है। एक बार छवि और लाइब्रेरी ब्राउज़र में लोड हो जाने के बाद, हम आवश्यक क्षेत्र को हाइलाइट करने के लिए एक आकृति बनाने के लिए छवि की वांछित स्थिति पर डबल टैप, होल्ड और ड्रैग कर सकते हैं। एक बार आकृति बन जाने के बाद, एक पॉपअप खुलता है जो आपको टिप्पणियाँ जोड़ने और यहाँ तक कि संबंधित टिप्पणियों को लेबल/टैग करने की अनुमति देता है। उदाहरण के लिए, नीचे स्क्रीनशॉट देखें:
छवियों में JSON संग्रहीत एनोटेशन जोड़ें
पिछले उदाहरण में, हमने दिखाया कि वेब पेज के साथ एनोटोरियस लाइब्रेरी को कैसे एकीकृत किया जाए और छवि पर मैन्युअल रूप से एनोटेशन कैसे बनाएं। हालाँकि, JSON फ़ाइल में पूर्व-निर्धारित एनोटेशन को उनकी स्थिति सहित संग्रहीत करना, loadAnnotations विधि का उपयोग करके JSON फ़ाइल से एनोटेशन डेटा लोड करना और फिर उन एनोटेशन को स्वचालित रूप से छवि में जोड़ना भी संभव है।
नोट: एनोटोरियस W3C वेब एनोटेशन डेटा मॉडल और W3C मीडिया फ़्रैगमेंट स्पेसिफिकेशन के अनुरूप है, ताकि मीडिया संसाधन के विशिष्ट भागों या फ़्रैगमेंट पर एनोटेशन जोड़े जा सकें। इसलिए, संगत JSON फ़ाइल संरचना का उपयोग किया जाना चाहिए।
नीचे नमूना annotations.json फ़ाइल दी गई है जिसका उपयोग छवि में स्वचालित रूप से एनोटेशन जोड़ने के लिए किया जाता है:
ऊपर दिया गया कोड annotations.json फ़ाइल से एनोटेशन डेटा लोड करता है और उन्हें स्वचालित रूप से छवि में जोड़ता है। उदाहरण के लिए, नीचे स्क्रीनशॉट देखें:
ऑनलाइन डेमो
आप Annotorious जावास्क्रिप्ट लाइब्रेरी की बेहतर समझ के लिए छवि एनोटेशन डेमो और JSON आधारित छवि एनोटेशन डेमो की जाँच करके उपरोक्त दो उदाहरणों को ऑनलाइन भी आज़मा सकते हैं।
निष्कर्ष
एनोटोरियस ओपन सोर्स और एक बेहतरीन एनोटेशन जावास्क्रिप्ट लाइब्रेरी है: हालाँकि, यह केवल छवियों में एनोटेशन जोड़ने का समर्थन करता है। इसके अलावा, सीमित संख्या में आकृतियाँ भी हैं जिनका उपयोग एनोटेशन के लिए किया जा सकता है।
