ไลบรารีคำอธิบายประกอบสำหรับคำอธิบายประกอบรูปภาพ 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 หลังจากที่คุณแตกไฟล์ zip แล้ว คุณจะเห็นไฟล์ด้านล่าง (โดยที่ 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 ไลบรารีจาวาสคริปต์ หลังจากรวมไลบรารีคำอธิบายประกอบรูปภาพแล้ว เราก็สามารถเพิ่มรูปภาพที่ต้องเพิ่มคำอธิบายประกอบได้ และสุดท้ายเราก็สามารถเขียนโค้ด JavaScript เพื่อเริ่มต้นไลบรารี Annotorious เพื่อเพิ่มคำอธิบายประกอบให้กับรูปภาพได้
โค้ดด้านบนจะแสดงรูปภาพในเบราว์เซอร์ที่พร้อมสำหรับคำอธิบายประกอบ เมื่อโหลดรูปภาพและไลบรารีลงในเบราว์เซอร์แล้ว เราสามารถแตะสองครั้งค้างไว้แล้วลากบนตำแหน่งที่ต้องการของรูปภาพเพื่อวาดรูปร่างเพื่อเน้นพื้นที่ที่ต้องการ เมื่อวาดรูปร่างแล้ว ป๊อปอัปจะเปิดขึ้นเพื่อให้คุณเพิ่มความคิดเห็นและแม้แต่ความคิดเห็นที่เกี่ยวข้องกับป้ายกำกับ/แท็กได้ ตัวอย่างเช่น ตรวจสอบภาพหน้าจอด้านล่าง:
เพิ่มคำอธิบายประกอบที่จัดเก็บด้วย JSON ให้กับรูปภาพ
ในตัวอย่างก่อนหน้านี้ เราได้แสดงวิธีการรวมไลบรารี Annotorious เข้ากับหน้าเว็บ และวาดคำอธิบายประกอบบนรูปภาพด้วยตนเอง อย่างไรก็ตาม คุณยังสามารถจัดเก็บคำอธิบายประกอบที่กำหนดไว้ล่วงหน้าในไฟล์ JSON รวมถึงตำแหน่ง โหลดข้อมูลคำอธิบายประกอบจากไฟล์ JSON โดยใช้วิธี loadAnnotations จากนั้นจึงเพิ่มคำอธิบายประกอบเหล่านั้นลงในรูปภาพโดยอัตโนมัติ
หมายเหตุ: Annotorious สอดคล้องกับ โมเดลข้อมูลคำอธิบายประกอบเว็บ W3C และ ข้อกำหนดเฉพาะของส่วนสื่อของ W3C เพื่อเพิ่มคำอธิบายประกอบในส่วนหรือส่วนเฉพาะของทรัพยากรสื่อ ดังนั้นควรใช้โครงสร้างไฟล์ JSON ที่เข้ากันได้
ด้านล่างนี้คือไฟล์ตัวอย่าง annotations.json ซึ่งใช้เพื่อเพิ่มคำอธิบายประกอบให้กับรูปภาพโดยอัตโนมัติ:
โค้ดด้านบนจะโหลดข้อมูลคำอธิบายประกอบจากไฟล์ annotations.json และเพิ่มลงในรูปภาพโดยอัตโนมัติ ตัวอย่างเช่น ตรวจสอบภาพหน้าจอด้านล่าง:
การสาธิตออนไลน์
คุณยังสามารถลองสองตัวอย่างข้างต้นทางออนไลน์ได้โดยตรวจสอบเป้าหมาย การสาธิตคำอธิบายประกอบรูปภาพ และ การสาธิตคำอธิบายประกอบรูปภาพที่ใช้ JSON เพื่อความเข้าใจที่ดีขึ้นเกี่ยวกับไลบรารี Annotorious JavaScript
บทสรุป
Annotorious เป็นโอเพ่นซอร์สและเป็นไลบรารี JavaScript คำอธิบายประกอบที่ยอดเยี่ยม อย่างไรก็ตาม รองรับเฉพาะการเพิ่มคำอธิบายประกอบให้กับรูปภาพเท่านั้น นอกจากนี้ยังมีรูปทรงที่สามารถใช้สำหรับคำอธิบายประกอบได้ในจำนวนจำกัด
