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

暗記用マーカー - シンプル穴埋め問題作成

Google Play で手に入れよう
Download on the App Store

 

超即ToDo –最短2タップで通知登録できるタスク管理アプリ

Google Play で手に入れよう
Download on the App Store

 

かんたんプリント管理:アラート・OCR文字認識・検索機能を搭載

Google Play で手に入れよう
Download on the App Store

 

シンプルメモ帳「BasicMemo」 - 文字カウント、ワンタッチ入力、タグ管理等の機能を搭載

Macのデスクトップ版もリリースしました。

Google Play で手に入れよう
Download on the App Store

 

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

おすすめの学習教材

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

 

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

 

おすすめの学習書籍

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

 

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


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

 

おすすめのソフトウェア

安くて高機能。アプリの独自ドメイン・紹介サイト構築に最適/

 

\アイコン作成・画面設計・クラウド保存...何でもできて超必須

 

おすすめのハードウェア

\リーズナブルな価格で検証端末を確保できる/

 

\目線の高さを調節しやすく、疲れにくい

 

\キータッチが超静音で心地よい/

 

おすすめのサポートアイテム

\部屋の中を仕切って、集中できる開発環境を作れる/

 

\部屋の中でも大き過ぎず、長時間座っても疲れない

 

\バグと格闘した後の肩こりを解消してくれる/

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