জাভাস্ক্রিপ্ট ইমেজ টীকা জন্য অনাকাঙ্খিত লাইব্রেরি
জাভাস্ক্রিপ্টে অ্যানোটোরিয়াস লাইব্রেরি ব্যবহার করে ওয়েব পৃষ্ঠাগুলিতে চিত্রগুলিতে অঙ্কন, মন্তব্য এবং লেবেল যুক্ত করুন৷
নোটোরিয়াস কি?
অ্যানোটোরিয়াস হল জাভাস্ক্রিপ্টে লেখা একটি ওপেন সোর্স ইমেজ অ্যানোটেশন লাইব্রেরি যা ব্রাউজারের মধ্যে ইমেজের পছন্দসই অবস্থানে আকৃতি আঁকার মাধ্যমে ইমেজগুলিতে টীকা যোগ করার অনুমতি দেয়। যখনই টীকাটির জন্য একটি আকৃতি আঁকা হয়, এটি মন্তব্য যোগ করার জন্য একটি পপআপও খোলে এবং এমনকি ট্যাগ যোগ করে টীকাটিকে লেবেল করে। লাইব্রেরি বিদ্যমান টীকাগুলিতে উত্তর যোগ করা এবং প্রয়োজনে সেগুলি মুছে ফেলাও সমর্থন করে।
অ্যানোটোরিয়াস লাইব্রেরি দ্বারা সমর্থিত কিছু বৈশিষ্ট্য নীচে তালিকাভুক্ত করা হয়েছে:
- আকৃতি আঁকুন: অ্যানোটোরিয়াস ব্যবহারকারীদের ছবিগুলিতে আয়তক্ষেত্র, বৃত্ত, উপবৃত্ত এবং ফ্রিহ্যান্ড টীকাগুলির মতো আকারগুলি আঁকতে সক্ষম করে৷
- মন্তব্য ও নোট: ব্যবহারকারীরা Annotorious ব্যবহার করে একটি ছবির নির্দিষ্ট অংশে কাস্টম মন্তব্য এবং নোট যোগ করতে পারেন।
- লেবেলিং বা ট্যাগিং: অ্যানোটোরিয়াস একটি চিত্রের মধ্যে বিভিন্ন এলাকা বা বস্তুকে টীকা করতে লেবেল বা ট্যাগ যোগ করার ক্ষমতা সমর্থন করে।
- ইন্টিগ্রেশন: অ্যানোটোরিয়াস সহজে ওয়েব পৃষ্ঠা এবং ওয়েবসাইটে একত্রিত করা যেতে পারে, বিরামহীন টীকা কার্যকারিতার জন্য অনুমতি দেয়।
- কাস্টমাইজেশন: লাইব্রেরি আপনার প্রয়োজন অনুসারে টীকাগুলির চেহারা এবং আচরণ কাস্টমাইজ করার বিকল্প সরবরাহ করে৷
- সামঞ্জস্যতা: বিভিন্ন ওয়েব ব্রাউজার এবং প্ল্যাটফর্মের সাথে বিদ্বেষপূর্ণ কাজ করে, এটি বিভিন্ন পরিবেশের জন্য বহুমুখী করে তোলে।
অ্যানোটোরিয়াস দিয়ে শুরু করা
অ্যানোটোরিয়াস পেতে এবং আপনার ওয়েব প্রকল্পগুলিতে এটি ব্যবহার শুরু করার তিনটি উপায় রয়েছে।
1. NPM ব্যবহার করে ইনস্টল করুন
আপনি Node.js ইনস্টল করার পরে, নীচের কমান্ডটি চালান:
NPM ব্যবহার করে Annotorious ইনস্টল করুন
npm install @recogito/annotorious
2. CDN এর মাধ্যমে হোস্ট করা লাইব্রেরি ব্যবহার করুন
অ্যানোটোরিয়াস ফ্রি CDN সার্ভারে হোস্ট করা হয়েছে এবং আপনি নীচের মত URL ব্যবহার করতে পারেন:
- JS: https://cdn jsdelivr.net/npm/@recogito/annotorious@2.7.10/dist/annotorious.min.js
- CSS: https://cdn jsdelivr.net/npm/@recogito/annotorious@2.7.10/dist/annotorious.min.css
3. প্রি-বিল্ট রিলিজ ব্যবহার করুন
GitHub থেকে অ্যানোটোরিয়াস-এর একটি পূর্ব-নির্মিত সর্বশেষ রিলিজ ডাউনলোড করুন। আপনি জিপ করা রিলিজ বের করার পরে, আপনি নীচের ফাইলগুলি দেখতে পাবেন (যেখানে 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 ফাইলগুলি পাব যেগুলি অ্যানোটোরিয়াসকে একীভূত করতে হেড ট্যাগের সাথে ওয়েবসাইটে লিঙ্ক করা যেতে পারে। জাভাস্ক্রিপ্ট লাইব্রেরি। ইমেজ টীকা লাইব্রেরি ইন্টিগ্রেট করার পরে, আমরা একটি ইমেজ যোগ করতে পারি যার উপর টীকা যোগ করতে হবে এবং অবশেষে আমরা জাভাস্ক্রিপ্ট কোড লিখতে পারি ইমেজে টীকা যোগ করার জন্য অ্যানোটোরিয়াস লাইব্রেরি আরম্ভ করার জন্য।
উপরের কোডটি ব্রাউজারে টীকাগুলির জন্য প্রস্তুত একটি চিত্র দেখায়। ব্রাউজারে একবার ইমেজ এবং লাইব্রেরি লোড হয়ে গেলে, প্রয়োজনীয় এলাকা হাইলাইট করার জন্য আমরা ছবির পছন্দসই অবস্থানে ডবল ট্যাপ, ধরে এবং টেনে আনতে পারি। একবার আকৃতি আঁকা হয়ে গেলে, একটি পপআপ খোলে যা আপনাকে মন্তব্য যোগ করতে দেয় এবং এমনকি লেবেল/ট্যাগ সম্পর্কিত মন্তব্যও করতে দেয়। উদাহরণস্বরূপ, নীচের স্ক্রিনশটটি দেখুন:
ছবিতে JSON সঞ্চিত টীকা যোগ করুন
পূর্ববর্তী উদাহরণে, আমরা দেখিয়েছি কিভাবে ওয়েব পৃষ্ঠার সাথে অ্যানোটোরিয়াস লাইব্রেরি সংহত করা যায় এবং ম্যানুয়ালি ইমেজে টীকা আঁকতে হয়। যাইহোক, এটি একটি JSON ফাইলে পূর্ব-নির্ধারিত টীকাগুলিকে তাদের অবস্থান সহ সংরক্ষণ করাও সম্ভব, লোডঅ্যানোটেশন পদ্ধতি ব্যবহার করে JSON ফাইল থেকে টীকা ডেটা লোড করুন এবং তারপরে স্বয়ংক্রিয়ভাবে সেই টীকাগুলি ছবিতে যুক্ত করুন৷
দ্রষ্টব্য: অ্যানোটোরিয়াস W3C ওয়েব টীকা ডেটা মডেল এবং W3C মিডিয়া ফ্র্যাগমেন্ট স্পেসিফিকেশন মিডিয়া রিসোর্সের নির্দিষ্ট অংশ বা টুকরোগুলিতে টীকা যোগ করতে। সুতরাং, সামঞ্জস্যপূর্ণ JSON ফাইল কাঠামো ব্যবহার করা উচিত।
নীচে annotations.json ফাইলের নমুনা রয়েছে যা স্বয়ংক্রিয়ভাবে ছবিতে টীকা যোগ করতে ব্যবহৃত হয়:
উপরের কোডটি annotations.json ফাইল থেকে টীকা ডেটা লোড করে এবং স্বয়ংক্রিয়ভাবে ছবিতে যুক্ত করে। উদাহরণস্বরূপ, নীচের স্ক্রিনশটটি দেখুন:
অনলাইন ডেমো
টার্গেট চেক করে উপরের দুটি উদাহরণ অনলাইনেও চেষ্টা করতে ইমেজ টীকা ডেমো এবং JSON ভিত্তিক ইমেজ টীকা ডেমো ব্যবহার করে টীকা ডেমো।
উপসংহার
অ্যানোটোরিয়াস হল ওপেন সোর্স এবং একটি দুর্দান্ত টীকা জাভাস্ক্রিপ্ট লাইব্রেরি: যাইহোক, এটি শুধুমাত্র চিত্রগুলিতে টীকা যোগ করা সমর্থন করে। তাছাড়া, সীমিত সংখ্যক আকার রয়েছে যা টীকাগুলির জন্য ব্যবহার করা যেতে পারে।
