जावास्क्रिप्ट छवि एनोटेशन के लिए एनोटोरियस लाइब्रेरी
जावास्क्रिप्ट में एनोटोरियस लाइब्रेरी का उपयोग करके वेब पेजों में छवियों में चित्र, टिप्पणियाँ और लेबल जोड़ें।
Annotorious क्या है?
एनोटोरियस जावास्क्रिप्ट में लिखी गई एक ओपन सोर्स इमेज एनोटेशन लाइब्रेरी है जो छवि के वांछित स्थानों पर आकृतियाँ बनाकर ब्राउज़र के भीतर छवियों पर एनोटेशन जोड़ने की अनुमति देती है। जब भी एनोटेशन के लिए कोई आकृति बनाई जाती है, तो यह टिप्पणियां जोड़ने के लिए एक पॉपअप भी खोलता है और यहां तक कि टैग जोड़कर एनोटेशन को लेबल भी करता है। लाइब्रेरी मौजूदा एनोटेशन में उत्तर जोड़ने और यदि आवश्यक हो तो उन्हें हटाने का भी समर्थन करती है।
एनोटोरियस लाइब्रेरी द्वारा समर्थित कुछ विशेषताएं नीचे सूचीबद्ध हैं:
- आकृतियाँ बनाएं: एनोटोरियस उपयोगकर्ताओं को छवियों पर आयत, वृत्त, दीर्घवृत्त और फ्रीहैंड एनोटेशन जैसी आकृतियाँ बनाने में सक्षम बनाता है।
- टिप्पणियाँ और नोट्स: उपयोगकर्ता एनोटोरियस का उपयोग करके किसी छवि के विशिष्ट भागों में कस्टम टिप्पणियाँ और नोट्स जोड़ सकते हैं।
- लेबलिंग या टैगिंग: एनोटोरियस एक छवि के भीतर विभिन्न क्षेत्रों या वस्तुओं को एनोटेट करने के लिए लेबल या टैग जोड़ने की क्षमता का समर्थन करता है।
- एकीकरण: एनोटोरीअस को आसानी से वेब पेजों और वेबसाइटों में एकीकृत किया जा सकता है, जिससे निर्बाध एनोटेशन कार्यक्षमता की अनुमति मिलती है।
- अनुकूलन: लाइब्रेरी आपकी आवश्यकताओं के अनुरूप एनोटेशन के स्वरूप और व्यवहार को अनुकूलित करने के लिए विकल्प प्रदान करती है।
- संगतता: एनोटोरियस विभिन्न वेब ब्राउज़रों और प्लेटफार्मों के साथ अच्छी तरह से काम करता है, जो इसे विभिन्न वातावरणों के लिए बहुमुखी बनाता है।
एनोटोरियस के साथ शुरुआत करना
एनोटोरियस पाने और अपने वेब प्रोजेक्ट्स में इसका उपयोग शुरू करने के तीन तरीके हैं।
Node.js इंस्टॉल करने के बाद, नीचे दिए गए कमांड को चलाएँ:
एनपीएम का उपयोग करके एनोटोरियस स्थापित करें
npm install @recogito/annotorious
एनोटोरियस को मुफ्त CDN सर्वर पर भी होस्ट किया गया है और आप नीचे दिए गए URL का उपयोग कर सकते हैं:
- JS: 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
GitHub से Annotorious की पूर्व-निर्मित नवीनतम रिलीज़ डाउनलोड करें। ज़िप्ड रिलीज़ को निकालने के बाद, आपको नीचे दी गई फ़ाइलें दिखाई देंगी (जहाँ छवि एनोटेशन के लिए वेबसाइट में annotorious.min.css और annotorious.min.js का उपयोग किया जाएगा):
- annotorious.min.css
- annotorious.min.js
- annotorious.umd.js.map
- recogito-polyfills.js
छवियों में एनोटेशन जोड़ें
यदि हम पूर्व-निर्मित रिलीज़ डाउनलोड करते हैं, तो हमें annotorious.min.css और annotorious.min.js फ़ाइलें मिलती हैं, जिन्हें Annotorious को एकीकृत करने के लिए हेड टैग में वेबसाइट के साथ जोड़ा जा सकता है। जावास्क्रिप्ट लाइब्रेरी. छवि एनोटेशन लाइब्रेरी एकीकृत होने के बाद, हम एक छवि जोड़ सकते हैं जिस पर एनोटेशन जोड़ना होगा और अंत में हम छवि में एनोटेशन जोड़ने के लिए एनोटोरियस लाइब्रेरी को आरंभ करने के लिए जावास्क्रिप्ट कोड लिख सकते हैं।
उपरोक्त कोड ब्राउज़र में एनोटेशन के लिए तैयार एक छवि दिखाता है। एक बार छवि और लाइब्रेरी ब्राउज़र में लोड हो जाने के बाद, हम आवश्यक क्षेत्र को हाइलाइट करने के लिए एक आकृति बनाने के लिए छवि की वांछित स्थिति पर दो बार टैप, होल्ड और ड्रैग कर सकते हैं। एक बार आकृति तैयार हो जाने पर, एक पॉपअप खुलता है जो आपको टिप्पणियाँ जोड़ने और यहां तक कि संबंधित टिप्पणियों को लेबल/टैग करने की भी अनुमति देता है। उदाहरण के लिए, नीचे स्क्रीनशॉट देखें:
छवियों में JSON संग्रहीत एनोटेशन जोड़ें
पिछले उदाहरण में, हमने दिखाया कि एनोटोरियस लाइब्रेरी को वेब पेज के साथ कैसे एकीकृत किया जाए और छवि पर मैन्युअल रूप से एनोटेशन कैसे बनाया जाए। हालाँकि, पूर्व-परिभाषित एनोटेशन को उनकी स्थिति सहित JSON फ़ाइल में संग्रहीत करना, loadAnnotations पद्धति का उपयोग करके JSON फ़ाइल से एनोटेशन डेटा लोड करना और फिर स्वचालित रूप से उन एनोटेशन को छवि में जोड़ना भी संभव है।
ध्यान दें: एनोटोरियस W3C वेब एनोटेशन डेटा मॉडल और W3C मीडिया फ़्रैगमेंट विशिष्टता किसी मीडिया संसाधन के विशिष्ट भागों या फ़्रैगमेंट पर एनोटेशन जोड़ने के लिए। इसलिए, संगत JSON फ़ाइल संरचना का उपयोग किया जाना चाहिए।
नीचे नमूना annotations.json फ़ाइल है जिसका उपयोग छवि में स्वचालित रूप से एनोटेशन जोड़ने के लिए किया जाता है:
उपरोक्त कोड एनोटेशन डेटा को एनोटेशन.जेसन फ़ाइल से लोड करता है और उन्हें स्वचालित रूप से छवि में जोड़ता है। उदाहरण के लिए, नीचे स्क्रीनशॉट देखें:
ऑनलाइन डेमो
आप छवि एनोटेशन डेमो और JSON आधारित इमेज एनोटेशन डेमो का उपयोग कर रहा है।
निष्कर्ष
एनोटोरियस खुला स्रोत और एक बेहतरीन एनोटेशन जावास्क्रिप्ट लाइब्रेरी है: हालाँकि, यह केवल छवियों में एनोटेशन जोड़ने का समर्थन करता है। इसके अलावा, सीमित संख्या में आकृतियाँ भी हैं जिनका उपयोग एनोटेशन के लिए किया जा सकता है।
