Introduction of Image Edit Plugin for Xamarin

I needed the processing in my app that an image was cropped, resized, rotated and saved. So I implemented it using DependencyService.

After that, I tried extracting the processing to use as a library and I thought this should be made as a Plugin.

That's why I made the Plugin which edits an image. This plugin is available on NuGet.

Source

https://github.com/muak/Xamarin.Plugin.ImageEdit

Nuget

https://www.nuget.org/packages/Xamarin.Plugin.ImageEdit/

Installation

Install-Package Xamarin.Plugin.ImageEdit

Install into your PCL / .NETStandard project and each platform projects.

Supported

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

Features

• Resizing
• Cropping
• Rotation
• Turning monochrome
• Convert to png/jpeg bytes array
• Getting ARGB pixels information

How to use

An image can be cropped, rotated, resized and converted PNG data in the following code:

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()
    );
}

With DI container (eg. prism.forms)

In case using as plugin, it is difficult to do unit test.
Considering unit test, you should use DI container such as unity on prism.forms as the following code:

//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>();
    }
}

API Usage

IImageEdit.CreateImageAsync

This method is used to get EditableImage object.

//from byte[]
var editableImage = await CrossImageEdit.Current.CreateImageAsync(imageByteArray);

//from stream
var editableImage = await CrossImageEdit.Current.CreateImageAsync(imageStream);

You can manipulate an image using a got EditableImage.

IEditableImage.Resize

This method resizes an image and returns IEditableImage.

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

editableImage.Resize(50); //specify max length of long side. other side auto size.

Specifying either width or height to 0, the other side will automatically be adjusted following the aspect ratio.

Passing only one argument, the long side length will become the value length and the other side will automatically be adjusted following the aspect ratio.

IEditableImage.Crop

This method crop an image and returns IEditableImage.

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

IEditableImage.Rotate

This method rotate an image and returns IEditableImage.

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

The rotation angle is specified from 0 to 360.

IEditableImage.ToMonochrome

This method turns an image color into monochrome and returns IEditableImage.

editableImage.ToMonochrome();

IEditableImage.ToPng

This method converts an image to PNG and returns PNG bytes array.

var pngBytes = editableImage.ToPng();

IEditableImage.ToJpeg

This method converts an image to JPEG and returns JPEG bytes array.

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

An image quality is specified from 0 to 100.

IEditableImage.ToArgbPixels

This method returns the image pixels array which has ARGB information.

For example, when an element of this array has 0xFF00F090 value, the state is the following.

A	R	G	B
FF	00	F0	90

And in order to get an individual color from this value, like the following code is used.

var pixels = editableImage.ToArgbPixels();

var pixel = pixels[10];
var r = pixel & 0x00FF0000 >> 16; //Get R
var g = pixel & 0x0000FF00 >> 8;  //Get G
var b = pixel & 0x000000FF;       //Get B

IEditableImage.GetNativeImage

This method returns each platform native image. If the platform is iOS, returns UIImage; Otherwise, returns Bitmap.

Concluding

I would be grateful if you could use this library.

If there are some questions, requests, and bug reports, please report it to GitHub issues or twitter (@muak_x ).

Thank you.