tiffデータの読込と表示_20210906 about optinist HOT 4 CLOSED

tiff fileをdecodeするライブラリについて

良いライブラリが見つからない

• tiff: class-propertiesを使っている（他にもcreate react appがデフォルトでサポートしていない記法を使っているかも）ので、下記のどちらかの方法で設定を変更する必要がある
  • ejectする（不可逆）
  • create-react-app-rewiredを使う
• geotiff: jsで記述されていて、@types/geotiffが提供されていないのでcompileできない
• JImp: File オブジェクトからreadできない

複数ページの表示について

• 通常のカルーセル表示を行うライブラリはimgタグで画像を表示している
• imgタグで画像を表示するには
  1. 画像ファイルへのpathを指定する
  2. 画像を表現するarrayBufferオブジェクトへの参照をsrcに指定する
• tiff -> png / jpeg etc. の変換をjavascriptで実行してそのまま表示するので、2の方法でできるはず（tiffの中の全画像をファイルに書き出すのは時間がかかる？）
• 2の方法でカルーセル表示するライブラリを見つけられていない

from optinist.

yarn run ejectせずに設定を変更する

1. react-app-rewired とcustomize-craをインストール
2. package.jsonのstart, build, test scriptをreact-app-rewiredで実行するように変更
3. config-override.jsを作成
4. config-override.jsに追加ルールを記述

class-propertyの許可

1. @babel/plugin-syntax-class-propertiesと@babel/plugin-proposal-class-propertiesをインストール
2. config.ovveride.jsを下記の用に変更

const {
    override,
    addExternalBabelPlugin
} = require('customize-cra');


module.exports = override(
    addExternalBabelPlugin('@babel/plugin-syntax-class-properties'),
    addExternalBabelPlugin('@babel/plugin-proposal-class-properties'),
)

from optinist.

selectしたマルチページtiffファイルをブラウザでばらして表示する

1. tiffを使ってselectで読み込んだファイルをdecode
2. fast-pngを使ってdecodeしたデータをpngデータにencode
3. pngにencodeしたデータをwindow.URL.createObjectURLに渡してimgタグで表示可能なオブジェクトへの参照を取得

によって表示させた結果が下記画像。
表示自体はできているが、表示内容がおかしい。tiffファイルによっては問題なく表示できるので、上手く対応できていないフォーマットのtiffファイルなのかも知れない。

from optinist.

方針変更

• ブラウザ側でオンメモリでtiffをdecode -> png画像にencodeするのに難航
• サーバーサイドでpng画像に変更する方向性を検討
  • サーバーサイド（python）でも、tiffをオンメモリ（一度ファイルに吐き出さずに）でデコードすることを試したが、PillowやOpenCVのライブラリがその操作に対応していなかった
  • サーバーサイドで、ブラウザから送信された画像を一度ファイルに保存してから読み込み直し、png画像にバラす方針とした

tiff画像の分割表示までの処理概要

1. ブラウザでtiffファイルを選択してサーバー側にアップロード
2. サーバー側で一度アップロードされたtiffファイルを保存
3. 一度保存したtiffファイルを読み込み
4. 読み込んだtiffファイルを1枚ずつpngに分割
5. 静的ファイル配信ディレクトリ配下に、ランダムに生成した文字列のディレクトを作成し、分割したpngファイルを保存
6. フロント側にランダムに生成した文字列を通知
7. フロントは、サーバー側から通知された文字列をuriの一部として、分割後のファイルをリクエスト・表示
   • サーバー側から通知された文字列がわからなければファイルにはアクセスできない

from optinist.