JavaScript Görüntü Açıklamaları için Annotorious Kütüphanesi

Annotorious Nedir?

Annotorious, tarayıcıda görüntünün istenen konumlarına şekiller çizerek görüntülere açıklamalar eklemenize olanak tanıyan JavaScript ile yazılmış açık kaynaklı bir görüntü açıklama kütüphanesidir. Açıklama için bir şekil çizildiğinde, yorumlar eklemek ve hatta etiketler ekleyerek açıklamayı etiketlemek için bir açılır pencere de açar. Kütüphane ayrıca mevcut açıklamalara yanıtlar eklemeyi ve gerekirse bunları silmeyi de destekler.

Annotorious kütüphanesinin desteklediği özelliklerden bazıları aşağıda listelenmiştir:

• Şekil Çizme: Annotorious, kullanıcıların dikdörtgenler, daireler, elipsler ve serbest elle açıklamalar gibi şekilleri görseller üzerine çizmelerini sağlar.
• Yorumlar ve Notlar: Kullanıcılar Annotorious'u kullanarak bir resmin belirli kısımlarına özel yorumlar ve notlar ekleyebilirler.
• Etiketleme veya Etiketleme: Annotorious, bir görüntüdeki farklı alanları veya nesneleri açıklamak için etiket veya etiketler ekleme yeteneğini destekler.
• Entegrasyon: Annotorious, web sayfalarına ve web sitelerine kolayca entegre edilebilir ve bu sayede sorunsuz açıklama işlevselliği sağlanır.
• Özelleştirme: Kütüphane, ihtiyaçlarınıza uyacak şekilde açıklamaların görünümünü ve davranışını özelleştirmek için seçenekler sunar.
• Uyumluluk: Annotorious çeşitli web tarayıcıları ve platformlarla iyi çalışır, bu da onu farklı ortamlar için çok yönlü hale getirir.

GitHub İstatistikleri

İsim:
Dil:
Yıldızlar:
Çatallar:
Lisans:
Depo en son şu tarihte güncellendi:

Annotorious'a Başlarken

Annotorious'u edinmenin ve web projelerinizde kullanmaya başlamanın üç yolu vardır.

1. NPM kullanarak kurulum yapın

Node.js'yi yükledikten sonra aşağıdaki komutu çalıştırın:

npm install @recogito/annotorious

2. CDN aracılığıyla barındırılan kütüphaneyi kullanın

Annotorious ayrıca ücretsiz CDN sunucusunda barındırılıyor ve aşağıdaki gibi URL'leri kullanabilirsiniz:

• 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. Önceden oluşturulmuş sürümü kullanın

Annotorious'un önceden oluşturulmuş son sürümünü GitHub'dan indirin. Sıkıştırılmış sürümü çıkardıktan sonra, aşağıdaki dosyaları göreceksiniz (burada annotorious.min.css ve annotorious.min.js web sitesinde resim açıklaması için kullanılacaktır):

• annotorious.min.css
• annotorious.min.js
• annotorious.umd.js.harita
• recogito-polyfills.js

Resimlere Açıklamalar Ekleyin

Önceden oluşturulmuş bir sürümü indirirsek, head etiketindeki web sitesiyle bağlantılandırılabilen annotorious.min.css ve annotorious.min.js dosyalarını alırız ve bu dosyalar Annotorious JavaScript kütüphanesini entegre etmek için kullanılabilir. Resim açıklama kütüphanesi entegre edildikten sonra, üzerine açıklama eklenmesi gereken bir resim ekleyebilir ve son olarak resme açıklamalar eklemek için Annotorious kütüphanesini başlatmak üzere JavaScript kodu yazabiliriz.

Yukarıdaki kod, tarayıcıda açıklamalar için hazır bir resim gösterir. Resim ve kitaplık tarayıcıya yüklendikten sonra, istenen alanı vurgulamak için bir şekil çizmek üzere resmin istenen konumuna çift dokunabilir, tutabilir ve sürükleyebiliriz. Şekil çizildikten sonra, yorum eklemenize ve hatta ilgili yorumları etiketlemenize/etiketlemenize olanak tanıyan bir açılır pencere açılır. Örneğin, aşağıdaki ekran görüntüsüne bakın:

Görüntülere JSON Depolanmış Açıklamalar Ekleyin

Önceki örnekte, Annotorious kütüphanesini web sayfasına nasıl entegre edeceğimizi ve görüntüye elle ek açıklamalar nasıl çizeceğimizi gösterdik. Ancak, önceden tanımlanmış ek açıklamaları konumlarıyla birlikte bir JSON dosyasında saklamak, loadAnnotations yöntemini kullanarak JSON dosyasından ek açıklama verilerini yüklemek ve ardından bu ek açıklamaları otomatik olarak görüntüye eklemek de mümkündür.

Not: Annotorious, bir medya kaynağının belirli bölümlerine veya parçalarına açıklamalar eklemek için W3C Web Açıklama Veri Modeli ve W3C Medya Parçaları Spesifikasyonu'na uygundur. Bu nedenle, uyumlu JSON dosya yapısı kullanılmalıdır.

Aşağıda, görüntüye otomatik olarak açıklama eklemek için kullanılan örnek annotations.json dosyası bulunmaktadır:

Yukarıdaki kod, annotations.json dosyasından açıklama verilerini yükler ve bunları otomatik olarak görüntüye ekler. Örneğin, aşağıdaki ekran görüntüsüne bakın:

Çevrimiçi Demo

Annotorious JavaScript kütüphanesini daha iyi anlamak için Resim Açıklama demosu ve JSON tabanlı Resim Açıklamaları demosu'nu inceleyerek yukarıdaki iki örneği çevrimiçi olarak da deneyebilirsiniz.

Çözüm

Annotorious açık kaynaklıdır ve harika bir açıklama JavaScript kütüphanesidir: ancak yalnızca resimlere açıklama eklemeyi destekler. Ayrıca, açıklamalar için kullanılabilecek sınırlı sayıda şekil de vardır.

Benzer Ürünler