Crop, Blend (Watermark) Photos on Windows Phone 8.1 with the Lumia Imaging SDK

By July 17, 2015Windows Phone
Watermark image demo windows phone 81

I recently needed the ability to combine two images on Windows Phone 8.1 (WinRT not Silverlight) so that one overlays the other, like a watermark. Because the watermark image was a fixed size and dimension, we also needed to make sure that the photo being merged shared the same aspect ratio (in this case a square).

Although I found many examples for cropping and blending in Silverlight, Windows 8.1, and Win32 (GDI+), none of them apply to Windows Phone 8.1 as it omits many of the required libraries and references.

One solution often suggested is to use XAML to layer the images on top of each other, and although this works visually, it doesn’t help if you actually need a merged photo, such as for upload to a service like Facebook or Instagram.

Fortunately in the end, I was able to leverage the Lumia Imaging SDK to perform both the cropping and the blending of the two images, and in this post we’ll look at some of the code that makes this happen. In addition, I’ve created a sample project that demonstrates the operations, available for download to anyone who might need it.

Despite the name, the Lumia Imaging SDK appears to be functional on non-Lumia devices, as we did test it successfully with an HTC device. However, the documentation doesn’t explicitly state that all devices are supported, so your mileage may vary…

Luima SDK Crop and Blend Demo Project

The sample project includes a fixed watermark image source, saved as content into the project so it is available in the installed application folder. It also includes a demo image (with thanks to Bing) to be blended.

Watermark image demo windows phone 81

Tapping the photo allows you to replace it (I used the emulator here):

Watermark photos on Windows Phone 8.1 Emulator

And on my test device (Lumia 640) I used the camera to take and watermark a photo of my Roomba.

Watermark photo on Windows Phone Device

The original photo from my camera was actually at lot taller; it was automatically cropped so that it matches the watermark source.

Let’s look at how this is done.

Cropping the Image

The first thing we need to do is crop the image to match the aspect ratio of the watermark. In order to do that we must calculate the crop dimensions, the result of which will be a Rect object.

I wasn’t able to find a way to get the actual image dimensions without first loading it into memory, so the first thing to do is take the selected image and load it into a BitmapImage. We can then use the smaller side to determine the final dimensions, and center the Rect in that space.

Once we have the Rect area to be cropped, we use the CropFilter effect in the Lumia Imaging SDK to render the photo as a Jpeg into memory.

I’m returning the cropped image as an IBuffer so that we can use it both to update the View with a new BitmapImage, but also to pass it as a stream to the ViewModel. This way we can reuse that stream when we execute the actual blending of the two images, which we’ll see in the next section.

Now, all of this occurs after a user selects a photo with the FileOpenPicker, so here’s the continuation code that takes the selected image and calls the above methods to crop it, binding the result to the ViewModel as described.

Once the selection is made, the user can click the Blend button, which triggers the corresponding command in the ViewModel to perform the merging of the images. Let’s look at that next.

Merging Images with the Blend Filter

This command is very straightforward; we simply take the source watermark file from storage and load it into StorageFileImageSource as the background image. Next we take the stream from the previous section and use it to create a StreamImageSource for the foreground picture.

Once both of those are loaded, we simply pass them as arguments to the BlendEffect, and use that to render a new jpeg of the blended image as another IBuffer.

Finally the resulting IBuffer is converted to a stream and loaded into a new BitmapImage so it can be shown on the screen. Here’s the complete merge command code:

The same IBuffer result could also be converted to a Byte array (with the commented out ToArray() extension method), which is useful if you need to post the merged photo to a webservice (like Facebook or Instagram).

This sample could also easily be modified to save the merged photo to storage, the user’s library, as well as to use two StorageFileImageSource objects to allow any two user-selected photos to be merged. I’ll leave that as an exercise for the reader (be sure and share your results in the comments!).

Wrapping Up and Project Download

The Lumia Imaging SDK helps to close the gap on some of the missing libraries and functionality in Windows Phone 8.1, offering a wide variety of filters and effects that can be applied to images, as well as basic operations that would otherwise not be possible on Windows Phone.

Be sure to grab the sample project!

And share any feedback in the comments below. As always, I hope this was helpful, and thanks for reading.

The following two tabs change content below.
  • Pingback: Dew Drop – July 20, 2015 (#2057) | Morning Dew()

  • Carlo

    Please, could you upload again the sample project?

    • oops sorry I didn’t realize there was an issue, thanks for letting me know, I’ll update this thread when it’s back up, sorry for any inconvenience!

      • Carlo

        thank you, It’s very important for me understand how this SDK works so thank you for this work!

  • Jose Sibrian

    Are you going to upload the sample? I fill the form and everything. Please sr!!!

  • Lexi Mize

    4 MEG for winphone deployment! NOT! Maybe that doesn’t matter much to you, but sheesh, that’s too big for simple image editing.

  • Blaž Oblak

    I can’t download your sample. Could you please check if something is wrong with the server. Thanks

    • We’ve updated the form so please try again. Thanks for notifying us about the issue, and sorry for any trouble!