کتابخانه Annotorious برای حاشیه نویسی تصویر جاوا اسکریپت

Annotorious چیست؟

Annotorious یک کتابخانه حاشیه نویسی تصویر منبع باز است که در جاوا اسکریپت نوشته شده است که اجازه می دهد تا با کشیدن اشکال در موقعیت های دلخواه تصویر، حاشیه نویسی روی تصاویر در مرورگر اضافه کنید. هر زمان که شکلی برای حاشیه نویسی ترسیم می شود، یک پنجره باز می شود تا نظرات را اضافه کند و حتی با اضافه کردن برچسب ها، حاشیه نویسی را برچسب گذاری کند. کتابخانه همچنین از افزودن پاسخ به حاشیه نویسی های موجود و همچنین حذف آنها در صورت لزوم پشتیبانی می کند.

برخی از ویژگی های پشتیبانی شده توسط کتابخانه Annotorious در زیر ذکر شده است:

• طراحی شکل‌ها: Annotorious به کاربران امکان می‌دهد تا اشکالی مانند مستطیل، دایره، بیضی و حاشیه‌نویسی‌های دست آزاد را روی تصاویر بکشند.
• نظرات و یادداشت‌ها: کاربران می‌توانند نظرات و یادداشت‌های سفارشی را با استفاده از Annotorious به بخش‌های خاصی از تصویر اضافه کنند.
• برچسب‌گذاری یا برچسب‌گذاری: Annotorious از قابلیت افزودن برچسب‌ها یا برچسب‌ها برای حاشیه‌نویسی مناطق یا اشیاء مختلف در یک تصویر پشتیبانی می‌کند.
• ادغام: Annotorious را می‌توان به راحتی در صفحات وب و وب‌سایت‌ها ادغام کرد و امکان عملکرد یکپارچه حاشیه‌نویسی را فراهم می‌کند.
• سفارشی سازی: کتابخانه گزینه هایی را برای سفارشی کردن ظاهر و رفتار حاشیه نویسی ها مطابق با نیازهای شما ارائه می دهد.
• سازگاری: Annotorious با مرورگرها و پلتفرم‌های مختلف وب به خوبی کار می‌کند و آن را برای محیط‌های مختلف همه‌کاره می‌کند.

آمار GitHub

نام:
زبان:
ستاره ها:
چنگال:
مجوز:
آخرین به روز رسانی مخزن در

شروع کار با Annotorious

سه راه برای دریافت Annotorious و شروع استفاده از آن در پروژه های وب خود وجود دارد.

1. با استفاده از NPM نصب کنید

پس از نصب Node.js، دستور زیر را اجرا کنید:

npm install @recogito/annotorious

2. از کتابخانه میزبانی شده از طریق CDN استفاده کنید

Annotorious همچنین در سرور CDN رایگان میزبانی می‌شود و می‌توانید از نشانی‌های اینترنتی مانند زیر استفاده کنید:

• 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. از نسخه از پیش ساخته شده استفاده کنید

آخرین نسخه از پیش ساخته شده Annotorious را از 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 را دریافت می‌کنیم که می‌توانند با وب‌سایت در برچسب head پیوند داده شوند تا Annotorious یکپارچه شود. کتابخانه جاوا اسکریپت پس از اینکه کتابخانه حاشیه نویسی تصویر یکپارچه شد، می توانیم تصویری را اضافه کنیم که باید حاشیه نویسی روی آن اضافه شود و در نهایت می توانیم کد جاوا اسکریپت را برای مقداردهی اولیه کتابخانه Annotorious برای افزودن حاشیه نویسی به تصویر بنویسیم.

کد بالا به سادگی تصویری را در مرورگر آماده برای حاشیه نویسی نشان می دهد. هنگامی که تصویر و کتابخانه در مرورگر بارگیری می‌شوند، می‌توانیم دوبار ضربه بزنید، نگه دارید و بکشید روی موقعیت مورد نظر تصویر برای ترسیم شکلی به منظور برجسته کردن ناحیه مورد نیاز. هنگامی که شکل رسم شد، یک پنجره باز می شود که به شما امکان می دهد نظرات را اضافه کنید و حتی نظرات مرتبط را برچسب/برچسب بزنید. به عنوان مثال، اسکرین شات زیر را بررسی کنید:

یادداشت های ذخیره شده JSON را به تصاویر اضافه کنید

در مثال قبلی، نحوه ادغام کتابخانه Annotorious با صفحه وب و ترسیم دستی حاشیه نویسی روی تصویر را نشان دادیم. با این حال، همچنین می‌توان حاشیه‌نویسی‌های از پیش تعریف‌شده را در یک فایل JSON از جمله موقعیت‌های آنها ذخیره کرد، داده‌های حاشیه‌نویسی را از فایل JSON با استفاده از روش loadAnnotations بارگیری کرد و سپس به طور خودکار آن حاشیه‌نویسی را به تصویر اضافه کرد.

توجه: Annotorious مطابق با مدل داده های حاشیه نویسی وب W3C و مشخصات بخش های رسانه W3C برای افزودن حاشیه نویسی در بخش ها یا قطعات خاصی از یک منبع رسانه. بنابراین، ساختار فایل JSON سازگار باید استفاده شود.

در زیر نمونه فایل annotations.json است که برای افزودن خودکار حاشیه‌نویسی به تصویر استفاده می‌شود:

کد بالا داده های حاشیه نویسی را از فایل annotations.json بارگیری می کند و به صورت خودکار به تصویر اضافه می کند. به عنوان مثال، اسکرین شات زیر را بررسی کنید:

نسخه ی نمایشی آنلاین

همچنین می‌توانید با علامت زدن نمایش حاشیه نویسی تصویر و نمونه نمایشی حاشیه نویسی تصویر مبتنی بر JSON برای درک بهتر کتابخانه Annotorious JavaScript.

نتیجه

Annotorious منبع باز و یک کتابخانه جاوا اسکریپت حاشیه نویسی عالی است: با این حال، فقط از افزودن حاشیه نویسی به تصاویر پشتیبانی می کند. علاوه بر این، تعداد محدودی از اشکال نیز وجود دارد که می توان از آنها برای حاشیه نویسی استفاده کرد.

محصولات مشابه