“vdiff-seq.js”は、ウェブページ埋め込み型のシーケンス画像比較ツールである。
本ツールは、“vdiff.js”と同様の射影変換機能を備え、画像内で比較したい対象の配置の違いを軽減して比較できる点に独自性があり、時系列で変化する一連の画像について、その変化を可視化する目的に適している。
同一版木による版本の追跡（同一板木追跡）等の目的に活用できる。
この文書は、vdiff-seq.jsについて記述する。その他の情報については、以下の別資料を参照のこと。
- vdiff.js：2枚の画像を比較するツールに関する情報
目次
動作デモ／活用例
使い方
時系列で変化する一連の画像（画像1、画像2、画像3、……、画像Nとする。）に対し、本ツールでは、一連の画像ペア（画像1と2、画像2と3、……、画像N-1とN）について、vdiff.jsの「強調表示」相当の比較結果画像が表示される。
各画像ペアについて生成される比較結果画像は、画像1に合わせて射影変換される。例えば、画像4と5の比較結果画像については、画像4から3への射影変換行列、画像3から2への射影変換行列、画像2から1への射影変換行列を累積的に適⽤し、画像1に重なり合うように射影変換される。
比較結果画像の左右に表示される矢印ボタンや下部に表示されるドットボタンにより、表示する比較結果画像の前後移動や任意移動が行える。
下部には、埋め込み時の設定に応じて、各種機能を提供するアイコンボタンが表示される。
「詳細表示」アイコンボタンの押下によって、現在表示している画像ペアについて、vdiff.jsを用いた詳細な比較表示が行える。
「比較結果の合わせ直し」アイコンボタンの押下によって、現在表示している画像ペア（画像nとn+1とする。）の画像nを基準として、以降の比較結果画像の合わせ直しが行える。
また、埋め込み時の設定によっては「関連情報」アイコンボタンが表示される。同ボタンの押下によって、埋め込み時に指定されたURLに遷移できる。
埋め込み時の設定
注意点
埋め込みの順序
JavaScriptファイルの読み込みと本ツールのインスタンス化は、以下の順序で行うこと。
- 本ツールのJavaScriptファイル読み込み
- 本ツールのインスタンス化
- OpenCV.jsのJavaScriptファイル読み込み
設定
VDiffSeq(config)
configは次に挙げるプロパティを持ったオブジェクト
| 項目名 | 型 | 説明 |
|---|---|---|
id |
String | （必須）本ツールの埋め込み先となる<div>のIDを指定する。 |
data |
Object | 対象画像に関する情報を指定する（後述）。 埋め込み時に本項目が未設定である場合、埋め込み先ページURLに対するGETパラメータ指定により、本項目で指定可能な項目の一部を設定できる（後述）。 |
size |
Object | 画像サイズ・画像表示サイズの制限値を指定する（後述）。 |
lang |
String | 表示言語を指定する。日本語表示は'ja'、英語表示は'en'を指定する。 |
dataは次に挙げるプロパティを持ったオブジェクト
| 項目名 | 型 | 説明 |
|---|---|---|
sequence |
Array | 対象画像に関する情報datumの配列を指定する。 |
datumは次に挙げるプロパティを持ったオブジェクト
| 項目名 | 型 | 説明 |
|---|---|---|
img1 |
String | （必須）画像nのURLを指定する。 |
img2 |
String | （必須）画像n+1のURLを指定する。 |
img1_label |
String | 画像nのラベルを指定する。 |
img2_label |
String | 画像n+1のラベルを指定する。 |
corr_pts |
Object|String | 対応点情報（画像nと画像n+1の対応点、画像サイズの情報を含むオブジェクト）、または、対応点指示文字列を指定する。 対応点情報に含める対応点は、4組必要。詳細は設定例（後述）参照。 corr_ptsに対応点情報が適切に与えられている場合、その対応点情報に基づいて射影変換行列を求め、射影変換が行われる。corr_ptsに対応点指示文字列'corners'が指定されている場合、画像nおよび画像n+1の四隅を対応点として扱い、射影変換が行われる。上記以外の場合（ corr_ptsが未指定の場合を含む）、img1_roi_xywh（img1_roi_xywhも未指定の場合は画像全体）を対象として、ブラウザ上で特徴量抽出と対応点決定を行い、射影変換が行われる。 |
img1_roi_xywh |
String |
関心領域（画像nのうち、画像n+1と比較したい矩形領域）を指定する。 記載例：
|
related |
String | 関連情報のURLを指定する。 本項目が設定されている場合、「関連情報」アイコンボタン（指定されたURLへのリンク）が表示される。 |
sizeは次に挙げるプロパティを持ったオブジェクト
画像サイズの制限値
| 項目名 | 型 | 説明 |
|---|---|---|
max-size |
Number | 画像処理上の最大サイズ（一辺の長さ）をピクセル値で指定する。 対象画像の一辺の長さが指定値を超える大きさであった場合、指定の制限を満たすように縮小の上、画像処理（特徴量抽出と対応点決定）が行われる。ブラウザに表示される際の画像の大きさはCSS設定や画像表示サイズの制限値による。 |
画像表示サイズの制限値（次に挙げるプロパティのいずれか）
| 項目名 | 型 | 説明 |
|---|---|---|
max-width |
Number | 画像表示の最大幅をピクセル値で指定する。 対象画像の幅が指定値を超える大きさであった場合、指定の制限を満たすように縮小して表示される。 |
max-height |
Number | 画像表示の最大高さをピクセル値で指定する。 対象画像の高さが指定値を超える大きさであった場合、指定の制限を満たすように縮小して表示される。 |
URL（GET引数）による動作指定
埋め込み時に対象画像に関する情報が未設定である場合、埋め込み先ページURLに対するGETパラメータを用いて以下の動作指定が行える。
| 項目名 | 型 | 説明 |
|---|---|---|
img{n} |
String | （必須）画像nのURLを指定する。 項目名の例： img1、img2、img3など |
img{n}_label |
String | 画像nのラベルを指定する。 項目名の例： img1_label、img2_label、img3_labelなど |
設定例
対象画像とラベル、対応点情報を指定した例
<link rel="stylesheet" href="vdiffseqjs/vdiff-seq.bundle.css">
<script src="vdiffseqjs/vdiff-seq.bundle.min.js"></script>
<div id="vdiff_seq"></div>
<script>
(function() {
VDiffSeq({
id: 'vdiff_seq',
data: {
sequence: [
{
img1: 'http://codh.rois.ac.jp/pmjt/iiif/200019583/200019583_00017.tif/pct:10,25,80,50/900,375/0/default.jpg',
img2: 'http://codh.rois.ac.jp/pmjt/iiif/200019586/200019586_00017.tif/pct:10,25,80,50/900,375/0/default.jpg',
img1_label: '袖玉武鑑 （慶応１／1865） [200019583]',
img2_label: '袖玉武鑑 （慶応１／1865） [200019586]',
corr_pts: {
img1: {
size: {w:900, h:375},
pts: [{x:0, y:0}, {x:900, y:0}, {x:900, y:375}, {x:0, y:375}]
},
img2: {
size: {w:900, h:375},
pts: [
{x:73.95384216308594, y:-14.4085693359375},
{x:981.622314453125, y:-6.315806865692139},
{x:977.8298950195312, y:368.4233093261719},
{x:73.85423278808594, y:362.97625732421875}
]
}
}
},
{
img1: 'http://codh.rois.ac.jp/pmjt/iiif/200019586/200019586_00017.tif/pct:10,25,80,50/900,375/0/default.jpg',
img2: 'http://codh.rois.ac.jp/pmjt/iiif/200019588/200019588_00017.tif/pct:10,25,80,50/900,375/0/default.jpg',
img1_label: '袖玉武鑑 （慶応１／1865） [200019586]',
img2_label: '袖玉武鑑 （慶応１／1865） [200019588]',
corr_pts: {
img1: {
size: {w:900, h:375},
pts: [{x:0, y:0}, {x:900, y:0}, {x:900, y:375}, {x:0, y:375}]
},
img2: {
size: {w:900, h:375},
pts: [
{x:22.862796783447266, y:19.481966018676758},
{x:916.1185302734375, y:15.861050605773926},
{x:917.6658935546875, y:388.9950866699219},
{x:26.926040649414062, y:395.2716979980469}
]
}
}
},
{
img1: 'http://codh.rois.ac.jp/pmjt/iiif/200019588/200019588_00017.tif/pct:10,25,80,50/900,375/0/default.jpg',
img2: 'http://codh.rois.ac.jp/pmjt/iiif/200019590/200019590_00017.tif/pct:10,25,80,50/900,375/0/default.jpg',
img1_label: '袖玉武鑑 （慶応１／1865） [200019588]',
img2_label: '袖玉武鑑 （慶応１／1865） [200019590]',
corr_pts: {
img1: {
size: {w:900, h:375},
pts: [{x:0, y:0}, {x:900, y:0}, {x:900, y:375}, {x:0, y:375}]
},
img2: {
size: {w:900, h:375},
pts: [
{x:-75.04904174804688, y:5.685976505279541},
{x:831.7913818359375, y:1.7496670484542847},
{x:832.9423828125, y:382.8157653808594},
{x:-77.6353988647461, y:379.0860595703125}
]
}
}
},
{
img1: 'http://codh.rois.ac.jp/pmjt/iiif/200019590/200019590_00017.tif/pct:10,25,80,50/900,375/0/default.jpg',
img2: 'http://codh.rois.ac.jp/pmjt/iiif/200019592/200019592_00017.tif/pct:10,25,80,50/900,375/0/default.jpg',
img1_label: '袖玉武鑑 （慶応１／1865） [200019590]',
img2_label: '袖玉武鑑 （慶応２／1866） [200019592]',
corr_pts: {
img1: {
size: {w:900, h:375},
pts: [{x:0, y:0}, {x:900, y:0}, {x:900, y:375}, {x:0, y:375}]
},
img2: {
size: {w:900, h:375},
pts: [
{x:-75.60741424560547, y:-3.6625027656555176},
{x:804.8836669921875, y:-15.472230911254883},
{x:807.4255981445312, y:353.2998046875},
{x:-70.19304656982422, y:366.0613098144531}
]
}
}
},
{
img1: 'http://codh.rois.ac.jp/pmjt/iiif/200019592/200019592_00017.tif/pct:10,25,80,50/900,375/0/default.jpg',
img2: 'http://codh.rois.ac.jp/pmjt/iiif/200019595/200019595_00017.tif/pct:10,25,80,50/900,375/0/default.jpg',
img1_label: '袖玉武鑑 （慶応２／1866） [200019592]',
img2_label: '袖玉武鑑 （慶応２／1866） [200019595]',
corr_pts: {
img1: {
size: {w:900, h:375},
pts: [{x:0, y:0}, {x:900, y:0}, {x:900, y:375}, {x:0, y:375}]
},
img2: {
size: {w:900, h:375},
pts: [
{x:55.833499908447266, y:4.8685431480407715},
{x:958.0963134765625, y:4.054573059082031},
{x:960.7723999023438, y:379.6940002441406},
{x:54.03525161743164, y:380.3258056640625}
]
}
}
}
]
}
});
})();
</script>
<script src="https://docs.opencv.org/4.5.1/opencv.js" async></script>
画像1から6まで、6枚の画像を指定する場合、sequence部分のみ疑似的に示せば、以下の形になる。
sequence: [
{ img1: '画像1のURL', img2: '画像2のURL' },
{ img1: '画像2のURL', img2: '画像3のURL' },
{ img1: '画像3のURL', img2: '画像4のURL' },
{ img1: '画像4のURL', img2: '画像5のURL' },
{ img1: '画像5のURL', img2: '画像6のURL' }
]
同内容をGETパラメータを用いて指定する場合、以下の形になる。
?img1=画像1のURL&img2=画像2のURL&img3=画像3のURL&img4=画像4のURL&img5=画像5のURL&img6=画像6のURL
API
| メソッド | 返り値 | 説明 |
|---|---|---|
getParameters() |
Object | 現在表示している画像ペアに関する情報を、datumオブジェクト形式で返す。 |
getSequence() |
Array | 一連の画像ペアに関する情報を、datumオブジェクトの配列形式で返す。 |
制限仕様
本ツールでは、WebAssemblyを使用しており、WebAssemblyに未対応のブラウザ（Internet Explorerなど）では動作しない。
また、オリジン間リソース共有などセキュリティ上の制約により画像が取得できない場合は、動作対象外である。
ライセンス
vdiff-seq.js - JavaScript-based visual differencing tool for sequential images
http://codh.rois.ac.jp/software/vdiffseqjs/
Copyright 2022 Center for Open Data in the Humanities, Research Organization of Information and Systems
Released under the MIT license
Core contributor: Jun HOMMA (@2SC1815J)
Licenses of open source libraries, see acknowledgements.md
開発履歴
バージョン1.1 (2022-04-27)
- 「比較結果の合わせ直し」機能により、自動重ね合わせに失敗した場合への対応を改善。
- 「関連情報」機能を追加。
バージョン1.0 (2022-03-24)
- vdiff-seq.jsを公開