画像を編集（リサイズ・切り抜き・回転）できるXamarinのプラグインを公開しました。

アプリ開発で、ネットから取得した画像を切り取ってサムネ化して保存するという処理が必要だったので、そういう処理を普通にDependencyServiceまたはprismのIPlatformInitializerを利用する前提で作成していました。

それで、それをライブラリ化しようと思って、何も考えずに普通に切り出して、nugetパッケージまで作成したところで、あれ？これってプラグインにすべき案件じゃないか？と気づいてしまって急遽Plugin for Xamarinとして作り直しました。

作り直しといっても、単純にPlugin用のプロジェクトテンプレートで作成してほぼコピペで移動しただけですが（笑）

そういうわけで完成しましたので、公開しました。

Image Edit Plugin for Xamarin

ソース

github.com

インストール

www.nuget.org

Install-Package Xamarin.Plugin.ImageEdit

PCLと各プラットフォームにインストールする必要があります。

対応プラットフォーム

Platform	Supported	Version
Xamarin.iOS	Yes	iOS 9+
Xamarin.Android	Yes	API 22+
Windows 10 UWP	No
Xamarin.Mac	No

プラグインなのにiOSとAndroidのみです。すみません…

使用例

画像を切り抜いてから180度回転させリサイズし、最後にpngとしてbyte配列を受け取る例です。

プラグインとして使う場合

通常はこちら。

using (var image = await CrossImageEdit.Current.CreateImageAsync(imageByteArray)) {
    var croped = await Task.Run(() =>
            image.Crop(10, 20, 250, 100)
                 .Rotate(180)
                 .Resize(100, 0)
                 .ToPng()
    );
}

IPlatformInitializer(prism.unity.forms)で使う場合

プラグインの使い方だとテストの時どうするんだろう？と思ったので（nullが帰ってくるだけだと思うのでスルーできるんだったら良いですが）、テストに優しいprismを使った例も載せておきます。

//View model constructor
public ViewModel(IImageEdit imageEdit){

    using (var image = await imageEdit.CreateImageAsync(imageByteArray)) {
        var croped = await Task.Run(() =>
                image.Crop(10, 20, 250, 100)
                     .Rotate(180)
                     .Resize(100, 0)
                     .ToPng()
        );
    }
}


//on platform
public class iOSInitializer : IPlatformInitializer
{
    public void RegisterTypes(IUnityContainer container)
    {
        container.RegisterType<IImageEdit,ImageEdit>();
    }
}

サンプル

https://github.com/muak/PanPinchSample

以前紹介したパンとピンチで画像のトリミングを行うUIのサンプルに、ImageEditを使って実際に切り抜いてリサイズして回転させる機能をつけました。

Image Edit Plugin for Xamarin
実際に画像を切り取って回転してリサイズして表示する様子 pic.twitter.com/vOCQ6kP5AQ
— かむ (@muak_x) 2017年3月2日

細かい説明

IEditableImageの取得

var image = await CrossImageEdit.Current.CreateImageAsync(imageByteArray);

画像のバイト配列を渡してIEditableImageオブジェクトを取得し、以降これを使って画像を加工していきます。

Resize

var width = 200;
var height = 200;
image.Resize(width, height);
image.Resize(width, 0); //auto height
image.Resize(0, height); //auto width

0指定でアスペクト比に合わせての自動調整です。

Crop

var x = 10;
var y = 10;
var width = 50;
var height = 50;
image.Crop(10, 10, 50, 50);

必要最低限の切り抜きです。

Rotate

var degree = 90; // 0-360;
image.Rotate(degree);

0-360の度数を渡して回転させます。 90,180,270以外を指定すると画像に余白ができます。

ToPng

var pngBytes = image.ToPng();

PNGとしてbyte配列を返します。

ToJpeg

var jpgBytes = image.ToJpeg(90); // quality(0-100)

JPGとしてbyte配列を返します。

ToArgbPixels

var pixels = image.ToArgbPixels();

画像のピクセル情報の配列を返します。要素はint型で入っていて、ARGBの順番にビットが立っている状態です。

例えば0xFF00F090だったら AがFF Rが00 GがF0 Bが90 となります。

A	R	G	B
FF	00	F0	90

なんというかデバッグ用とか実験用のおまけ機能だと思ってください。

作成にあたって

こちらの記事を熟読しました。 ticktack.hatenablog.jp

Readmeやら何やらの雛形はほとんどこちらからです。