JavaScript 画像注釈用の Annotorious ライブラリ
JavaScript の Annotorious ライブラリを使用して、Web ページの画像に描画、コメント、ラベルを追加します。
アノトーリアスとは何ですか?
Annotorious は、JavaScript で書かれたオープンソースの画像注釈ライブラリです。これを使用すると、画像の任意の位置に図形を描画することで、ブラウザ内の画像に注釈を追加できます。注釈用に図形が描画されるたびに、コメントを追加するためのポップアップも開き、タグを追加して注釈にラベルを付けることもできます。ライブラリでは、既存の注釈への返信の追加や、必要に応じて削除もサポートされています。
Annotorious ライブラリでサポートされている機能の一部を以下に示します。
- 図形の描画: Annotorious を使用すると、ユーザーは長方形、円、楕円などの図形や、画像上にフリーハンドの注釈を描画できます。
- コメントとメモ: ユーザーは、Annotorious を使用して画像の特定の部分にカスタム コメントとメモを追加できます。
- ラベル付けまたはタグ付け: Annotorious は、ラベルまたはタグを追加して、画像内のさまざまな領域またはオブジェクトに注釈を付ける機能をサポートします。
- 統合: Annotorious は Web ページや Web サイトに簡単に統合でき、シームレスな注釈機能が可能になります。
- カスタマイズ: ライブラリには、ニーズに合わせて注釈の外観と動作をカスタマイズするためのオプションが用意されています。
- 互換性: Annotorious はさまざまな Web ブラウザやプラットフォームで適切に動作するため、さまざまな環境に多用途に使用できます。
Annotorious を始める
Annotorious を入手して Web プロジェクトで使用を開始するには、3 つの方法があります。
1.NPMを使用してインストールする
Node.js をインストールした後、以下のコマンドを実行します。
NPM を使用して Annotorious をインストールする
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. ビルド済みリリースを使用する
GitHub から、ビルド済みの Annotorious の最新リリースをダウンロードします。 zip 形式のリリースを解凍すると、以下のファイルが表示されます (ここで、annotorious.min.css と annotorious.min.js は Web サイトで画像の注釈に使用されます)。
- annotorious.min.css
- annotorious.min.js
- annotorious.umd.js.map
- recogito-polyfills.js
画像に注釈を追加する
ビルド済みリリースをダウンロードすると、annotorious.min.css ファイルと annotorious.min.js ファイルが取得されます。これらのファイルをヘッド タグで Web サイトにリンクして、Annotorious を統合できます。 JavaScript ライブラリ。画像注釈ライブラリが統合された後、注釈を追加する必要がある画像を追加でき、最後に、画像に注釈を追加するために Annotorious ライブラリを初期化する JavaScript コードを作成できます。
上記のコードは、注釈を追加できる画像をブラウザーに表示しているだけです。画像とライブラリがブラウザに読み込まれたら、 画像の希望の位置をダブルタップして押したままドラッグして、必要な領域を強調表示するために形状を描くことができます。形状が描画されると、ポップアップが開き、コメントを追加したり、ラベル/タグ関連のコメントを追加したりすることができます。たとえば、以下のスクリーンショットを確認してください。
JSON に保存された注釈を画像に追加する
前の例では、Annotorious ライブラリを Web ページと統合し、画像上に手動で注釈を描画する方法を示しました。ただし、事前定義された注釈を位置も含めて JSON ファイルに保存し、loadAnnotations メソッドを使用して JSON ファイルから注釈データをロードし、それらの注釈を画像に自動的に追加することもできます。
注: Annotorious は、W3C Web アノテーション データ モデル および W3C メディア フラグメント仕様を使用して、メディア リソースの特定の部分またはフラグメントに注釈を追加します。したがって、互換性のある JSON ファイル構造を使用する必要があります。
以下は、画像に注釈を自動的に追加するために使用されるサンプルの annotations.json ファイルです。
上記のコードは、annotations.json ファイルから注釈データを読み込み、画像に自動的に追加します。たとえば、以下のスクリーンショットを確認してください。
オンラインデモ
画像注釈のデモ および JSON ベースの画像注釈デモを使用した注釈デモ。
結論
Annotorious はオープンソースであり、優れた注釈 JavaScript ライブラリです。ただし、画像への注釈の追加のみをサポートしています。さらに、注釈に使用できる形状の数も限られています。
