Flutter: image_pickerで読み込んだ画像が、撮影した向きどおりに表示されない

結論:RotatedBoxクラスで回転させて回避する

2021/11/20 Flutter エラー・バグ日記

 

image_pickerでカメラ撮影した画像を、画面に表示する処理を作っているが、横向きで撮影しても縦向きで表示されてしまう状況に遭遇した。

 

本記事はライトな日記思考で書いているので、詳細説明はしておらず、基本、テキストのみで画像とかは載せておりません。。m(_ _)m

解説記事ではないため、解決していない内容や、その時々の間違った解釈を述べてしまっている可能性が大いにありますので、何卒、ご了承ください。

 

調べてみると、こちらに対処法のスレッドがあった。

 

 

readAsBytesメソッドでUint8List型に変換した後、decodeImageメソッドでImage型に変換し、それをbakeOrientationメソッドにかけると、画像が「EXIF:Exchangeable Image File Format」データを持っていれば、その中にある向きのデータを見て、適切な向きに修正したImage型を生成してくれる、という方法らしい。

 

さっそく試すと、確かにできた。が、、、カメラ撮影してから画面に表示されるまでに異常に時間がかかるようになってしまった。。。

 

その他にも方法があるようだが、画像データそのものを直しにかかると処理に時間がかかりそうなので、表示するときにユーザーが回転ボタンをタップして調整できるようにする方針に変更。

 

調べると、こちらの記事にとてもありがたい情報が。

 

 

RotatedBoxクラスで表示部分をラップして、quarterTurnsプロパティをセットすればよいらしい。

 

ただ、quarterTurnsに「90」と入れたら、90度ではなく180度回転してしまった。

 

F4でソースコードを調べると、どうやらquarterTurnsには、90度ずつ何回回転させるか、の回数(int型)を指定するらしい。

 

つまり、0、1、2、3の4通りを設定すればよい。

 

結果、無事、思い通りの実装ができた。

 

上記情報をアップいただいた皆様、ありがとうございましたm(_ _)m

 

\ Flutterの学習で役立ったコンテンツ・書籍 /

 

 

 


Dart入門 – Dartの要点をつかむためのクイックツアー
タイトルとURLをコピーしました