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

أضف الرسومات والتعليقات والملصقات إلى الصور في صفحات الويب باستخدام مكتبة Annotorious في JavaScript.

ما هو Annotorious؟

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

فيما يلي بعض الميزات التي تدعمها مكتبة Annotorious:

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

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

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

البدء مع Annotorious

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

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

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

تثبيت Annotorious باستخدام NPM


npm install @recogito/annotorious

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

يتم استضافة Annotorious أيضًا على خادم CDN مجاني ويمكنك استخدام عناوين URL مثل الموجودة أدناه:

3. استخدم الإصدار المُجهز مسبقًا

قم بتنزيل أحدث إصدار مُجهَّز مسبقًا من Annotorious من GitHub. بعد استخراج الإصدار المضغوط، سترى الملفات أدناه (حيث سيتم استخدام annotorious.min.css وannotorious.min.js في موقع الويب لشرح الصور):

annotorious.min.css
annotorious.min.js
خريطة umd.js سيئة السمعة
ملف recogito-polyfills.js

إضافة التعليقات التوضيحية إلى الصور

إذا قمنا بتنزيل إصدار تم إنشاؤه مسبقًا، فسنحصل على ملفات annotorious.min.css وannotorious.min.js والتي يمكن ربطها بموقع الويب في علامة head لدمج مكتبة Annotorious JavaScript. بعد دمج مكتبة التعليقات التوضيحية للصور، يمكننا إضافة صورة يجب إضافة التعليقات التوضيحية عليها وأخيرًا يمكننا كتابة كود JavaScript لتهيئة مكتبة Annotorious لإضافة التعليقات التوضيحية للصورة.

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

إضافة تعليقات توضيحية للصورة

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

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

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

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

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

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

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

يمكنك أيضًا تجربة المثالين أعلاه عبر الإنترنت من خلال التحقق من Image Annotation demo وJSON based Image Annotations demo لفهم مكتبة Annotorious JavaScript بشكل أفضل.

خاتمة

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