ไลบรารี 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 เช่นด้านล่างนี้ได้:
- 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 แปลว่า
- annotorious.umd.js.แผนที่
- รีโคจิโตโพลีฟิลส์ js
เพิ่มคำอธิบายลงในรูปภาพ
หากเราดาวน์โหลดเวอร์ชันที่สร้างไว้ล่วงหน้า เราจะได้ไฟล์ annotorious.min.css และ annotorious.min.js ซึ่งสามารถเชื่อมโยงกับเว็บไซต์ในแท็ก head เพื่อรวมไลบรารี JavaScript ของ Annotorious หลังจากรวมไลบรารีคำอธิบายประกอบภาพแล้ว เราจะสามารถเพิ่มรูปภาพที่ต้องเพิ่มคำอธิบายประกอบ และสุดท้าย เราสามารถเขียนโค้ด JavaScript เพื่อเริ่มต้นไลบรารี Annotorious สำหรับการเพิ่มคำอธิบายประกอบลงในภาพได้
โค้ดด้านบนแสดงภาพในเบราว์เซอร์พร้อมสำหรับคำอธิบายประกอบ เมื่อโหลดภาพและไลบรารีในเบราว์เซอร์แล้ว เราสามารถ แตะสองครั้ง ค้างไว้แล้วลาก ที่ตำแหน่งที่ต้องการของภาพเพื่อวาดรูปร่างเพื่อเน้นบริเวณที่ต้องการ เมื่อวาดรูปร่างเสร็จแล้ว ป๊อปอัปจะเปิดขึ้นซึ่งอนุญาตให้คุณเพิ่มคำอธิบายประกอบและติดป้ายกำกับ/แท็กคำอธิบายประกอบที่เกี่ยวข้อง ตัวอย่างเช่น ดูภาพหน้าจอด้านล่าง:
เพิ่มคำอธิบายที่จัดเก็บเป็น JSON ลงในรูปภาพ
ในตัวอย่างก่อนหน้านี้ เราแสดงวิธีการผสานไลบรารี Annotorious เข้ากับเว็บเพจและวาดคำอธิบายประกอบบนรูปภาพด้วยตนเอง อย่างไรก็ตาม ยังสามารถจัดเก็บคำอธิบายประกอบที่กำหนดไว้ล่วงหน้าในไฟล์ JSON รวมถึงตำแหน่งของคำอธิบายประกอบ โหลดข้อมูลคำอธิบายประกอบจากไฟล์ JSON โดยใช้เมธอด loadAnnotations จากนั้นจึงเพิ่มคำอธิบายประกอบเหล่านั้นลงในรูปภาพโดยอัตโนมัติ
หมายเหตุ: Annotorious เป็นไปตาม W3C Web Annotation Data Model และ W3C Media Fragments Specification เพื่อเพิ่มคำอธิบายประกอบในส่วนหรือส่วนเฉพาะของทรัพยากรสื่อ ดังนั้นควรใช้โครงสร้างไฟล์ JSON ที่เข้ากันได้
ด้านล่างนี้เป็นตัวอย่างไฟล์ annotations.json ที่ใช้เพื่อเพิ่มคำอธิบายประกอบลงในรูปภาพโดยอัตโนมัติ:
โค้ดด้านบนจะโหลดข้อมูลคำอธิบายประกอบจากไฟล์ annotations.json และเพิ่มข้อมูลเหล่านี้ลงในรูปภาพโดยอัตโนมัติ ตัวอย่างเช่น ดูภาพหน้าจอด้านล่าง:
การสาธิตออนไลน์
คุณสามารถลองตัวอย่างสองตัวอย่างที่ด้านบนแบบออนไลน์ได้ โดยตรวจสอบที่ Image Annotation demo และ JSON based Image Annotations demo เพื่อความเข้าใจที่ดีขึ้นเกี่ยวกับไลบรารี JavaScript ของ Annotorious
บทสรุป
Annotorious เป็นโอเพ่นซอร์สและเป็นไลบรารี JavaScript สำหรับใส่คำอธิบายประกอบที่ยอดเยี่ยม อย่างไรก็ตาม Annotorious รองรับเฉพาะการเพิ่มคำอธิบายประกอบลงในรูปภาพเท่านั้น นอกจากนี้ ยังมีรูปร่างจำนวนจำกัดที่สามารถใช้ใส่คำอธิบายประกอบได้
