×
Namespaces

Variants
Actions

Edge detection filter in Windows Phone

From Nokia Developer Wiki
Jump to: navigation, search

Note.pngNote: This is an entry in the Nokia Imaging and Big UI Wiki Competition 2013Q4.

This article demonstrates how to create an edge detection filter in Windows Phone using Nokia Imaging SDK.

WP Metro Icon Multimedia.png
SignpostIcon XAML 40.png
WP Metro Icon WP8.png
Article Metadata
Code ExampleTested with
Devices(s): Nokia Lumia 820,920
Compatibility
Platform(s):
Windows Phone 8
Article
Created: somnathbanik (11 Dec 2013)
Last edited: somnathbanik (19 Dec 2013)

Contents

Introduction

Edge detection is used to identify the borders of different objects in an image. There are a number of mathematical techniques for edge detection, most of which work by identifying the points at which the image brightness changes sharply.

This article shows how to create an edge detection filter that marks edges with black points. The code example app allows the user to load an image from their gallery and then apply the filter in order to view the result.

Note.pngNote: This filter is not intended for use with the Nokia Imaging SDK.

Implementation

Create a standard Windows Phone Project

Let’s create a standard Windows Phone Application Project

  • Launch Visual Studio
  • Click on File
  • Click on New Project
  • Select Windows Phone App (Visual C# Template)
  • Add Name and Location of the project
  • Click OK to create the project.

Creating UI

  • Once you are done creating the standard project let’s add two Buttons and two Image controls in the MainPage.xaml. These controls are added to select an original image from the picture hub and apply edge filter on to it.
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Vertical">
<Image x:Name="imageOriginal" Height="300" Stretch="Uniform" Margin="12,0,12,0" VerticalAlignment="Top" HorizontalAlignment="Left"></Image>
<Button Content="Select Image" Click="Button_Click_1" ></Button>
<Image x:Name="imageProcessed" Height="300" Stretch="Uniform" Margin="12,0,12,0" VerticalAlignment="Top" HorizontalAlignment="Left"></Image>
<Button Content="Detect Edge" Click="Button_Click_2" ></Button>
</StackPanel>
</StackPanel>
</Grid>

Code Behind

  • Use the Photo Chooser Task to select an image from the gallery and store it to a BitmapImage
public MainPage()
{
InitializeComponent();
 
//select picture from picture hub
photoChooserTask = new PhotoChooserTask();
photoChooserTask.Completed += new EventHandler<PhotoResult>(photoChooserTask_Completed);
}
 
void photoChooserTask_Completed(object sender, PhotoResult e)
{
if (e.TaskResult == TaskResult.OK)
{
bmp = new BitmapImage();
bmp.SetSource(e.ChosenPhoto);
imageOriginal.Source = bmp;
}
}
  • We than take the Image Stream and pass it to the DoubleEffect() constructor to apply edge detection in the image.
                e.ChosenPhoto.Position = 0;
var imageStream = new StreamImageSource(e.ChosenPhoto);
CustomEffectBase referenceEffect = new DoubleEffect(imageStream);
var renderer = new WriteableBitmapRenderer(referenceEffect, ImageBitmap);
ImageBitmap = await renderer.RenderAsync();
imageProcessed.Source = ImageBitmap;
  • The DoubleEffect.cs class extended from CustomEffectBase class is responsible to detect the edges and return the final image. In this class we take two constitutive pixels and measure the difference of color.
 public class DoubleEffect : CustomEffectBase
{
 
public DoubleEffect(IImageProvider source)
: base(source)
{
}
protected override void OnProcess(PixelRegion sourcePixelRegion, PixelRegion targetPixelRegion)
{
sourcePixelRegion.ForEachRow((index, width, pos) =>
{
for (int x = 0; x < width; ++x, ++index)
{
try
{
Color a = ToColor(sourcePixelRegion.ImagePixels[index]);
Color b = ToColor(sourcePixelRegion.ImagePixels[index + 1]);
Color black = Color.FromArgb(1, 1, 1, 1);
Color white = Color.FromArgb(255,255,255,255);
bool color = CompareColors(a, b);
if (color)
{
targetPixelRegion.ImagePixels[index] = FromColor(white);
}
else
{
targetPixelRegion.ImagePixels[index] = FromColor(black);
}
}
catch (Exception e)
{
Deployment.Current.Dispatcher.BeginInvoke(() =>
{
MessageBox.Show(e.ToString());
});
}
}
});
}
public static bool CompareColors(Color a, Color b)
{
if (a.R.Equals(b.R) || a.G.Equals(b.G) || a.B.Equals(b.B))
{
//no edge
return true;
}
else
{
//edge
if (Math.Abs(a.R - b.R) > 9 || Math.Abs(a.G - b.G) > 9 || Math.Abs(a.B - b.B) > 9)
return false;
else
return true;
}
}
}

Source Code

This page was last modified on 19 December 2013, at 11:43.
155 page views in the last 30 days.
×