Introduction of Image Edit Plugin for Xamarin
Kamu
Posted on April 2, 2018
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.
Posted on April 2, 2018
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
May 16, 2023