JavaScript Görüntü Ek Açıklamaları için Annotorious Kitaplığı

Annotorious nedir?

Annotorious, JavaScript'te yazılmış, görüntünün istenen konumlarına şekiller çizerek tarayıcı içindeki görüntülere açıklamalar eklenmesine olanak tanıyan, açık kaynaklı bir görüntü açıklama kitaplığıdır. Açıklama için bir şekil çizildiğinde, yorum eklemek ve hatta etiketler ekleyerek açıklamayı etiketlemek için bir açılır pencere de açılır. Kitaplık ayrıca mevcut ek açıklamalara yanıt 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örtgen, daire, elips gibi şekiller çizmesine ve resimler üzerine serbest el açıklamaları yapmasına olanak tanır.
• Yorumlar ve Notlar: Kullanıcılar, Annotorious'u kullanarak görüntünün belirli bölümlerine özel yorumlar ve notlar ekleyebilir.
• Etiketleme veya Etiketleme: Annotorious, bir görüntüdeki farklı alanlara veya nesnelere açıklama eklemek için etiket veya etiket ekleme özelliğini destekler.
• Entegrasyon: Annotorious, web sayfalarına ve web sitelerine kolayca entegre edilebilir ve kusursuz açıklama işlevselliği sağlar.
• Özelleştirme: Kitaplık, ek açıklamaların görünümünü ve davranışını ihtiyaçlarınıza uyacak şekilde özelleştirmeye yönelik seçenekler sunar.
• Uyumluluk: Annotorious, çeşitli web tarayıcıları ve platformlarıyla 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. Barındırılan kütüphaneyi CDN aracılığıyla kullanın

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

• JS: https://cdn.jsdelivr.net/npm/@recogito/annatorious@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

GitHub'dan Annotorious'un önceden oluşturulmuş son sürümünü 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.map
• recogito-polyfills.js

Görsellere Ek Açıklamalar Ekleme

Önceden oluşturulmuş bir sürümü indirirsek, Annotorious'u entegre etmek için head etiketindeki web sitesine bağlanabilen annatorious.min.css ve annatorious.min.js dosyalarını alırız. JavaScript kitaplığı. Görüntü açıklama kitaplığı entegre edildikten sonra, üzerine açıklamaların eklenmesi gereken bir görüntü ekleyebiliriz ve son olarak görüntüye açıklama eklemek için Annotorious kitaplığını başlatmak üzere JavaScript kodu yazabiliriz.

Yukarıdaki kod, tarayıcıda ek açıklamalara hazır bir görüntüyü gösterir. Resim ve kitaplık tarayıcıya yüklendikten sonra, gerekli alanı vurgulamak amacıyla bir şekil çizmek için resmin istenen konumuna çift dokunabilir, basılı tutabilir ve sürükleyebiliriz. Şekil çizildiğinde, yorum eklemenizi ve hatta ilgili yorumları etiketlemenizi/etiketlemenizi sağlayan bir açılır pencere açılır. Örneğin, aşağıdaki ekran görüntüsünü kontrol edin:

JSON'da Saklanan Ek Açıklamaları Görüntülere Ekleme

Önceki örnekte Annotorious kütüphanesinin web sayfasına nasıl entegre edileceğini ve görsel üzerine manuel olarak açıklamaların nasıl çizileceğini göstermiştik. Ancak, önceden tanımlanmış ek açıklamaları konumlarıyla birlikte bir JSON dosyasında depolamak, loadAnnotations yöntemini kullanarak ek açıklama verilerini JSON dosyasından yüklemek ve ardından bu ek açıklamaları otomatik olarak görüntüye eklemek de mümkündür.

Not: Annotorious, W3C Web Ek Açıklama Veri Modeli ve W3C Medya Parçaları Belirtimi. Bu nedenle uyumlu JSON dosya yapısı kullanılmalıdır.

Resme otomatik olarak ek açıklamalar eklemek için kullanılan örnek annotations.json dosyası aşağıda verilmiştir:

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

Çevrimiçi Demo

Yukarıdaki iki örneği, Resim Ek Açıklaması demosu ve JSON tabanlı Resim Ek Açıklamaları demosunu kullanan Ek Açıklamalar demosu.

Çözüm

Annotorious açık kaynak kodlu ve harika bir açıklama JavaScript kitaplığıdır: 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