FC2ブログ

記事一覧

画像の向きを取得し、正しい向きで表示されるように画像を回転させる方法 | Xamarin.Forms


Xamarin.Forms で写真や画像を表示しようとしても横向きになったり逆さになったり正しく表示されないことがあります。特に Android では画像の向きに従って画像を回転させて表示する必要があり、正しい向きで画像を表示させるには少し複雑なプログラムを記述しなければなりませんでした。


xamarin_rotate_image_01.png



前提条件
・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 / Xcode9 / Xamarin.iOS 11.6.1.4



1.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);
}
}
}



2.iOSの実装方法

iOS では特に回転を意識したプログラミングは必要なく、以前のページ「iOSで画像のサイズを指定して縮小する方法 」で記載しています ResizeImage 関数を通れば勝手に正しい向きに変更されます。





最後までお読みいただきありがとうございます。
当ブログの内容をまとめた Xamarin逆引きメニュー は以下のURLからご覧になれます。
http://itblogdsi.blog.fc2.com/blog-entry-81.html


関連記事

コメント

コメントの投稿

カテゴリ別記事一覧

広告

プロフィール

石河 純


著者名 :石河 純
自己紹介:素人上がりのIT技術者。趣味は卓球・車・ボウリング

IT関連の知識はざっくりとこんな感じです。
【OS関連】
WindowsServer: 2012/2008R2/2003/2000/NT4
Windows: 10/8/7/XP/2000/me/NT4/98
Linux: CentOS RedHatLinux9
Mac: macOS Sierra 10.12 / OSX Lion 10.7.5 / OSX Snow Leopard 10.6.8
【言語・データベース】
VB.net ASP.NET C#.net Java VBA
Xamarin.Forms
Oracle10g SQLServer2008R2 SQLAnywhere8/11/16
ActiveReport CrystalReport ReportNet(IBM)
【ネットワーク関連】
CCNP シスコ技術者認定
Cisco Catalyst シリーズ
Yamaha RTXシリーズ
FireWall関連
【WEB関連】
SEO SEM CSS IIS6/7 apache2

休みの日は卓球をやっています。
現在、卓球用品通販ショップは休業中です。