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 / Xcode 9 / 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からご覧になれます。
https://itblog.dynaspo.com/blog-entry-81.html


関連記事

コメント

コメントの投稿

※名前とタイトルが入力されていないコメントでは他のコメントとの区別ができません。

 入力されていないコメントには返信しませんのであらかじめご了承くださいませ。

※ニックネームでも良いので必ずご入力ください。

    

※必ずご入力ください。

    
    

※必ずご入力ください。

※技術的な質問には環境やエラーについて正確かつ詳細にお教えください。

・正確なエラーの内容

・Windowsのバージョン番号

・Visual Studioのバージョン

・機器の型番

・アプリやソフトのバージョン

    

カテゴリ別記事一覧

広告

プロフィール

石河 純


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

IT関連の知識はざっくりとこんな感じです。
【OS関連】
WindowsServer: 2012/2008R2/2003/2000/NT4
Windows: 10/8/7/XP/2000/me/NT4/98
Linux: CentOS RedHatLinux9
Mac: macOS Catalina 10.15 / Mojave 10.14 / High Sierra 10.13 / Sierra 10.12 / OSX Lion 10.7.5 / OSX Snow Leopard 10.6.8
【言語】
VB.net ASP.NET C#.net Java VBA
Xamarin.Forms
【データベース】
Oracle 10g/9i
SQLServer 2016/2008R2/2005/2000
SQLAnywhere 16/11/8
【BI/レポートツール】
Cognos ReportNet (IBM)
Microsoft PowerBI
ActiveReport (GrapeCity)
CrystalReport
【OCX関連】
GrapeCity InputMan SPREAD MultiRow GridView
【ネットワーク関連】
CCNP シスコ技術者認定
Cisco Catalyst シリーズ
Yamaha RTXシリーズ
FireWall関連
【WEB関連】
SEO SEM CSS jQuery IIS6/7 apache2

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