読者です 読者をやめる 読者になる 読者になる

kamulog

xamarin.formsのネタなど

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

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

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

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

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

Image Edit Plugin for Xamarin

ソース

github.com

インストール

www.nuget.org

Install-Package Xamarin.Plugin.ImageEdit -Pre

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

対応プラットフォーム

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

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

使用例

画像を切り抜いてから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を使って実際に切り抜いてリサイズして回転させる機能をつけました。

細かい説明

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やら何やらの雛形はほとんどこちらからです。

github.com

ありがとうございました。