مكتبة Annotorious لتعليقات صور JavaScript

ما هو Annotorious؟

Annotorious هي مكتبة تعليقات توضيحية مفتوحة المصدر مكتوبة بلغة JavaScript وتسمح بإضافة تعليقات توضيحية على الصور داخل المتصفح عن طريق رسم الأشكال في المواضع المطلوبة من الصورة. عندما يتم رسم شكل للتعليق التوضيحي، فإنه يفتح أيضًا نافذة منبثقة لإضافة التعليقات وحتى تسمية التعليق التوضيحي عن طريق إضافة علامات. تدعم المكتبة أيضًا إضافة ردود على التعليقات التوضيحية الموجودة وحذفها أيضًا، إذا لزم الأمر.

بعض الميزات التي تدعمها مكتبة Annotorious مذكورة أدناه:

• رسم الأشكال: يمكّن Annotorious المستخدمين من رسم أشكال مثل المستطيلات والدوائر والأشكال الناقصية والتعليقات التوضيحية اليدوية على الصور.
• التعليقات والملاحظات: يمكن للمستخدمين إضافة تعليقات وملاحظات مخصصة إلى أجزاء معينة من الصورة باستخدام Annotorious.
• التسمية أو وضع العلامات: يدعم Annotorious القدرة على إضافة تسميات أو علامات للتعليق على مناطق أو كائنات مختلفة داخل الصورة.
• التكامل: يمكن دمج Annotorious بسهولة في صفحات الويب ومواقع الويب، مما يتيح وظيفة التعليقات التوضيحية بسلاسة.
• التخصيص: توفر المكتبة خيارات لتخصيص مظهر التعليقات التوضيحية وسلوكها لتناسب احتياجاتك.
• التوافق: يعمل Annotorious بشكل جيد مع العديد من متصفحات الويب والأنظمة الأساسية، مما يجعله متعدد الاستخدامات لبيئات مختلفة.

إحصائيات جيثب

اسم:
لغة:
النجوم:
الشوك:
رخصة:
تم تحديث المستودع آخر مرة في

الشروع في العمل مع Annotorious

هناك ثلاث طرق للحصول على Annotorious والبدء في استخدامه في مشاريع الويب الخاصة بك.

1. التثبيت باستخدام NPM

بعد تثبيت Node.js، قم بتشغيل الأمر أدناه:

npm install @recogito/annotorious

2. استخدم المكتبة المستضافة عبر CDN

تتم استضافة Annotorious أيضًا على خادم 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. استخدم الإصدار المبني مسبقًا

قم بتنزيل أحدث إصدار من 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 والتي يمكن ربطها بموقع الويب في علامة الرأس لدمج Annotorious مكتبة جافا سكريبت. بعد دمج مكتبة التعليقات التوضيحية للصور، يمكننا إضافة صورة يجب إضافة التعليقات التوضيحية عليها، وأخيرًا يمكننا كتابة كود JavaScript لتهيئة مكتبة Annotorious لإضافة التعليقات التوضيحية إلى الصورة.

يُظهر الرمز أعلاه ببساطة صورة في المتصفح جاهزة للتعليقات التوضيحية. بمجرد تحميل الصورة والمكتبة في المتصفح، يمكننا النقر المزدوج مع الاستمرار والسحب على الموضع المطلوب من الصورة لرسم شكل لتسليط الضوء على المنطقة المطلوبة. بمجرد رسم الشكل، يتم فتح نافذة منبثقة تسمح لك بإضافة التعليقات وحتى التعليقات ذات الصلة بالتسمية/العلامة. على سبيل المثال، تحقق من لقطة الشاشة أدناه:

أضف التعليقات التوضيحية المخزنة بتنسيق JSON إلى الصور

في المثال السابق، أظهرنا كيفية دمج مكتبة Annotorious مع صفحة الويب ورسم التعليقات التوضيحية يدويًا على الصورة. ومع ذلك، من الممكن أيضًا تخزين التعليقات التوضيحية المحددة مسبقًا في ملف JSON بما في ذلك مواضعها، وتحميل بيانات التعليقات التوضيحية من ملف JSON باستخدام طريقة loadAnnotations ثم إضافة تلك التعليقات التوضيحية تلقائيًا إلى الصورة.

ملاحظة: يتوافق Annotorious مع نموذج بيانات التعليقات التوضيحية على الويب W3C ومواصفات أجزاء وسائط W3C لإضافة تعليقات توضيحية على أجزاء أو أجزاء محددة من مورد الوسائط. لذلك، ينبغي استخدام بنية ملف JSON متوافقة.

يوجد أدناه نموذج ملف annotations.json الذي يُستخدم لإضافة التعليقات التوضيحية تلقائيًا إلى الصورة:

يقوم الكود أعلاه بتحميل بيانات التعليقات التوضيحية من ملف annotations.json ويضيفها إلى الصورة تلقائيًا. على سبيل المثال، تحقق من لقطة الشاشة أدناه:

العرض التوضيحي عبر الإنترنت

يمكنك أيضًا تجربة المثالين أعلاه عبر الإنترنت من خلال تحديد الهدف عرض توضيحي للصورة وعرض توضيحي لتعليقات الصور المستندة إلى JSON لفهم مكتبة Annotorious JavaScript بشكل أفضل.

خاتمة

Annotorious هي مكتبة جافا سكريبت مفتوحة المصدر وعظيمة للتعليقات التوضيحية: ومع ذلك، فهي تدعم فقط إضافة التعليقات التوضيحية إلى الصور. علاوة على ذلك، هناك أيضًا عدد محدود من الأشكال التي يمكن استخدامها للتعليقات التوضيحية.

منتجات مماثلة