When the new Nokia Imaging SDK was released I was really excited to start using it within one of my apps. Unlike most, I was not interested in the image filters that change how it looks. I was initially interested in using the resize and crop functionality it had. The day after it was released my wife had surgery, so I had a good amount of time to play with the SDK while I sat in the waiting room. What I wanted to accomplish that was to take a random photo from the users phone, crop and resize it to fit the device and set it as the lockscreen. I know that you can set any image to be the lockscreen and if the image is too big, it will center the image. I needed to do it manually because I wanted to overlay information on the image.
Getting the random image is pretty easy. We’ll just get one from the MediaLibrary.
private Picture GetRandomImage()
{
var rand = new Random(DateTime.Now.Millisecond);
MediaLibrary library = new MediaLibrary();
var album = library.RootPictureAlbum;
int albumIndex = rand.Next(0, album.Albums.Count - 1);
album = album.Albums[albumIndex];
var pictureIndex = rand.Next(0, album.Pictures.Count - 1);
var picture = album.Pictures[pictureIndex];
return picture;
}
Now that we have a Picture, we need to crop and resize it. All actions with an image are done through an EditingSession. You create an EditingSession with the EditingSessionFactory. The EditingSession has two key methods that allow us to crop and/or resize any image to fit the phone screen. The AddFilter method will allow us to crop the image while the RenderToJpegAsync method will allow us to resize the image. The AddFilter method is bar far the best part of the SDK. It allows you to do anything to the image., and I do mean anything. The method takes an IFilter as an argument. Lucky for us you can create a cropping filter. To create a cropping filter, you need to specify an area that will be the crop.
/// <summary>
/// Returns the area needed to crop an image to the desired height and width.
/// </summary>
/// <param name="imageSize">The size of the image.</param>
/// <param name="desiredSize">The desired size to crop the image to.</param>
/// <returns></returns>
private static Rect? GetCropArea(Size imageSize, Size desiredSize)
{
// how big is the picture compared to the phone?
var widthRatio = desiredSize.Width / imageSize.Width;
var heightRatio = desiredSize.Height / imageSize.Height;
// the ratio is the same, no need to crop it
if (widthRatio == heightRatio) return null;
double cropWidth;
double cropheight;
if (widthRatio < heightRatio)
{
cropheight = imageSize.Height;
cropWidth = desiredSize.Width / heightRatio;
}
else
{
cropheight = desiredSize.Height / widthRatio;
cropWidth = imageSize.Width;
}
int left = (int)(imageSize.Width - cropWidth) / 2;
int top = (int)(imageSize.Height - cropheight) / 2;
var rect = new Windows.Foundation.Rect(left, top, cropWidth, cropheight);
return rect;
}
I like to keep things generic and reusable, so the method above will crop any image to any size. If the desired size is larger than the image size it will crop to the same dimensions.
Now, given the Picture from the MediaLibrary, we can crop it using the Nokia Imaging SDK.
/// <summary>
/// Crops a Picture to the desired size.
/// </summary>
/// <param name="picture">The Picture to crop.</param>
/// <returns>A copy of the Picture which is cropped.</returns>
private static async Task<IBuffer> CropPicture(Picture picture, Size desiredSize)
{
using (var stream = picture.GetImage())
{
using (EditingSession session = await EditingSessionFactory.CreateEditingSessionAsync(stream))
{
// Get the crop area of the image, we need to ensure that
// the image does not get skewed
Rect? rect = GetCropArea(new Size(picture.Width, picture.Height), desiredSize);
if (rect.HasValue)
{
IFilter filter = FilterFactory.CreateCropFilter(rect.Value);
session.AddFilter(filter);
}
// We always want the image to be the size of the phone.
// That may mean that it needs to be scaled up also
var finalImageSize = new Size(desiredSize.Width, desiredSize.Height);
return await session.RenderToJpegAsync(finalImageSize, OutputOption.PreserveAspectRatio);
}
}
}
Again, the CropPicture method is generic, allowing for any size. This method could easily be an extension method on the Picture. Now we need to wrap everything up by calling these methods with the phone size. There are already examples of getting the resolution of the phone, so I won’t go into that. Now just put the pieces together.
private async Task<Stream> GetRandomLockscreen()
{
// Get the width and height of the phone
double phoneWidth = Resolution.PhoneWidth;
double phoneHeight = Resolution.PhoneHeight;
Picture mediaPicture = GetRandomImage();
IBuffer croppedImage = await CropPicture(mediaPicture, new Size(phoneWidth, phoneHeight));
if (croppedImage == null) return null;
return croppedImage.AsStream();
}
From there you can save the image to disk, and then maybe save it as a lockscreen. While this code works great, do not expect it to work in a background task. Here is the one place where the imaging SDK falls short. I was wanting to use the SDK in a background task. Background tasks are limited on the amount of resources allowed. The biggest limitation is the memory constraint. Working with images is very memory intensive, especially in C#. So when trying to manipulate an image in a background task, you can quickly run out of memory. I was hoping the imaging SDK would help alleviate some of these issues by working with images smarter. Instead of reading in every pixel of the image and then processing it, it should read n rows of pixels from the stream and then process those rows. This is a hard thing to accomplish, but I’m hoping the awesome people at Nokia can update their SDK to allow for this.