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で開発)

 

個人アプリ開発で役立ったもの

おすすめの学習教材

超初心者向けでオススメな元Udemyの講座/

 

 \キャンペーン時を狙えば安価で網羅的な内容が学べる(日本語訳あり)/

 

\Gitの基礎について無料で学べる/

 

おすすめの学習書籍

実用的image_pickerに関してかなり助けられた/

 

Dartの基礎文法を素早くインプットできる/


Dart入門 - Dartの要点をつかむためのクイックツアー

タイトルとURLをコピーしました