概要

Mirador 4において、任意の角度で画像を回転するプラグインを作成しました。

GitHub - nakamura196/mirador-rotation-plugin: mirador-rotation is a Mirador 4 plugin that enables the rotation of images at any angle.
mirador-rotation is a Mirador 4 plugin that enables the rotation of images at any angle. - nakamura196/mirador-rotation-plugin
GitHub

以下で挙動をご確認いただけます。

nakamura196.github.io
nakamura196.github.io

背景

Mirador 3向けに本プラグインを開発していましたが、2024/3/15にMirador 4がプレリリースされました。

Release v4.0.0.alpha-1 · ProjectMirador/mirador
Mirador v4 is a major refresh of many of the upstream dependencies of this project. Notably, Mirador v4 allows (and requires) downstream application use to React 18 and Material UI 5. Many other Mi...
GitHub

Mirador 3の最新版であるv3.3.0は2021年のリリースだったため、使用されているライブラリ等も古くなっていましたが、今回の更新で、開発がしやすくなりました。

工夫

任意の角度で画像を回転するにあたり、Mirador 4をそのまま使うと、以下のように、角度の変更に対して、画像の回転が追いつかないケースがありました。

そこで以下の記事で述べたように、画像の回転や拡大・縮小を遅延なく行うための機能を追加したMiradorを使用しています。

カスタマイズしたMirador 4をnpmパッケージとして公開する
カスタマイズしたMirador 4をnpmパッケージとして公開する
ldas.jp

具体的には、openseadragonのsetRotationなどで用意されているimmediatelyパラメータをMiradorから設定できるようにしました。

OpenSeadragon Class: Viewport
openseadragon.github.io

!

今回はMirador本体にも手を加えましたが、プラグイン側でこのような設定がすでにできるかもしれません。引き続き調査したいと思います。

参考

90度単位で画像を回転させるプラグインとしては、以下もあります。

GitHub - ProjectMirador/mirador-image-tools: a Mirador plugin that adds image manipulation tools to the user interface
a Mirador plugin that adds image manipulation tools to the user interface - ProjectMirador/mirador-image-tools
GitHub

こちらは回転だけでなく、さまざまな画像を操作を可能にします。

まとめ

Miradorの利用にあたり、参考になりましたら幸いです。