ספרייה אנושית להערות תמונה של 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 כמו להלן:
- 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 tag כדי לשלב את Annotorious ספריית JavaScript. לאחר שילוב ספריית הערות תמונה, נוכל להוסיף תמונה שעליה יש להוסיף הערות ולבסוף נוכל לכתוב קוד JavaScript כדי לאתחל ספריית Annotorious להוספת הערות לתמונה.
הקוד למעלה פשוט מציג תמונה בדפדפן המוכנה להערות. ברגע שהתמונה והספרייה נטענו בדפדפן, נוכלהקש פעמיים, החזק וגרורעל המיקום הרצוי של התמונה כדי לצייר צורה על מנת להדגיש את האזור הדרוש. לאחר ציור הצורה, נפתח חלון קופץ המאפשר להוסיף הערות ואפילו הערות הקשורות לתיוג/תיוג. לדוגמה, בדוק את צילום המסך למטה:
הוסף הערות מאוחסנות JSON לתמונות
בדוגמה הקודמת, הראינו כיצד לשלב את ספריית Annotorious עם דף האינטרנט ולצייר באופן ידני הערות על התמונה. עם זאת, ניתן גם לאחסן הערות מוגדרות מראש בקובץ JSON כולל מיקומן, לטעון נתוני הערות מקובץ JSON באמצעות שיטת loadAnnotations ולאחר מכן להוסיף את ההערות הללו לתמונה באופן אוטומטי.
הערה: Annotorious תואם למודל נתוני הערות אינטרנט של W3C וW3C Media Fragments Specification להוספת הערות על חלקים או קטעים ספציפיים של משאב מדיה. אז, יש להשתמש במבנה קובץ JSON תואם.
להלן הקובץ annotations.json לדוגמה המשמש להוספת הערות לתמונה באופן אוטומטי:
הקוד למעלה טוען נתוני הערות מקובץ annotations.json ומוסיף אותם לתמונה באופן אוטומטי. לדוגמה, בדוק את צילום המסך למטה:
הדגמה מקוונת
אתה יכול גם לנסות למעלה משתי דוגמאות מקוונות על ידי בדיקת הדגמה של הערת תמונה והדגמת תמונה מבוססת JSON להבנה טובה יותר של ספריית JavaScript Annotorious.
סיכום
Annotorious הוא קוד פתוח וספריית JavaScript מצוינת להערות: עם זאת, היא תומכת רק בהוספת הערות לתמונות. יתר על כן, יש גם מספר מוגבל של צורות שניתן להשתמש בהן להערות.
