コメント
コメントの投稿
※名前とタイトルが入力されていないコメントでは他のコメントとの区別ができません。
入力されていないコメントには返信しませんのであらかじめご了承くださいませ。
画像の向きを取得し、正しい向きで表示されるように画像を回転させる方法 | Xamarin.Forms
- 2018/02/11
- 21:55
Xamarin.Forms で写真や画像を表示しようとしても横向きになったり逆さになったり正しく表示されないことがあります。特に Android では画像の向きに従って画像を回転させて表示する必要があり、正しい向きで画像を表示させるには少し複雑なプログラムを記述しなければなりませんでした。
前提条件
・Windows10 Pro 64Bit
・Visual Studio 2015 Community Update3
・Xamarin 4.8.0.760 (NuGet Xamarin.Forms 2.4.0.282)
・macOS Sierra 10.12.6 / Xcode 9 / Xamarin.iOS 11.6.1.4
１．Androidの実装方法
Android プロジェクト内に CustomImageRenderer クラスを配置します。Renderer 内で ExifInterface を使用して画像の向きを取得し、Matrix を使用して向きに合わせて画像を回転させます。あとは画像処理でお馴染みの記述方法でBitmap を取得します。
CustomImageRenderer.cs
using System;
using System.ComponentModel;
using Android.Graphics;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
[assembly: ExportRenderer(typeof(Image), typeof(AppName.Droid.Renderer.CustomImageRenderer))]
namespace AppName.Droid.Renderer
{
public class CustomImageRenderer : ImageRenderer
{
protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
{
if (Control == null)
{
return;
}
ImageSource source = Element.Source;
var width = (int)Element.Width;
var height = (int)Element.Height;
Bitmap bitmap = null;
if (typeof(FileImageSource) == source.GetType())
{
var filePath = ((FileImageSource)source).File;
Android.Media.ExifInterface exifInterface = new Android.Media.ExifInterface(filePath);
// 向きを取得
int orientation = Int32.Parse(exifInterface.GetAttribute(Android.Media.ExifInterface.TagOrientation));
Matrix matrix = new Matrix();
matrix.Reset();
switch (orientation)
{
case (int)Android.Media.Orientation.Undefined: // 0:
break;
case (int)Android.Media.Orientation.Normal: // 1:
break;
case (int)Android.Media.Orientation.FlipHorizontal: // 2:
break;
case (int)Android.Media.Orientation.Rotate180: // 3:
matrix.PostRotate(180f);
break;
case (int)Android.Media.Orientation.FlipVertical: // 4:
break;
case (int)Android.Media.Orientation.Transpose: // 5:
break;
case (int)Android.Media.Orientation.Rotate90: // 6:
matrix.PostRotate(90f);
break;
case (int)Android.Media.Orientation.Transverse: // 7:
break;
case (int)Android.Media.Orientation.Rotate270: // 8:
matrix.PostRotate(270f);
break;
}
var options = new BitmapFactory.Options { InJustDecodeBounds = false };
bitmap = BitmapFactory.DecodeFile(filePath, options);
bitmap = Bitmap.CreateBitmap(bitmap, 0, 0, bitmap.Width, bitmap.Height, matrix, true);
}
//オリジナルのイメージコントロールに修正した画像ファイルをセットします。
Control.SetImageBitmap(bitmap);
}
}
}
２．iOSの実装方法
iOS では特に回転を意識したプログラミングは必要なく、以前のページ「iOSで画像のサイズを指定して縮小する方法 」で記載しています ResizeImage 関数を通れば勝手に正しい向きに変更されます。最後までお読みいただきありがとうございます。
当ブログの内容をまとめた Xamarin逆引きメニュー は以下のURLからご覧になれます。
https://itblog.dynaspo.com/blog-entry-81.html
- 関連記事
varchar をデータ型 numeric または decimal に変換中に、算術オーバーフロー エラーが発生しました。| SQL Server ホーム
スマホを判別して特定のURLにリダイレクトする方法 | asp.net
