02、Quick Start for Windows phone

在使用这个 SDK 提供的功能前，必须先添加类库的引用到你的工程里。参考： Download and add the libraries to the
project.

定义你的 XAML 的 UI

Ui 非常的简单，只有两个 Image 控件和两个按钮。一个 Image 用来显示原图，另一个显示经过滤镜处理过

的图片。类似的，一个按钮用来选择图片，另一个保存经过滤镜处理的图片到图片库中。

下面是实现的步骤：

1、在 VS 中打开 MainPage.xaml

2、定义 xaml 页面为 landscape orientation

SupportedOrientations="Landscape" Orientation="Landscape"
shell:SystemTray.IsVisible="False"

3、替换页面中默认的名字为LayoutRoot 的 grid 代码：

<!--LayoutRoot is the root grid where all page content is placed-->
<Canvas x:Name="LayoutRoot" Background="Transparent">

    <TextBlock Text="Nokia Imaging SDK" Style="{StaticResource PhoneTextNormalStyle}" />
    <Image x:Name="CartoonImage" Height="480" Width="800" Stretch="UniformToFill" />
    <Image x:Name="OriginalImage" Height="100" Width="157" Stretch="UniformToFill"  
                 Canvas.Left="24" Canvas.Top="70" Canvas.ZIndex="0"/>
    <Button Content="Pick an image" Click="PickAnImageButton_Click" Canvas.Left="24" Canvas.Top="398" />
    <Button Content="Save the image" Click="SaveImage_Click" x:Name="SaveButton" Canvas.Left="569" Canvas.Top="398" />

</Canvas>

上面的 Image 控件一个用来显示原图，另一个显示 CartoonImage。

从图片库中选择图片：

private void PickAnImageButton_Click(object sender, RoutedEventArgs e)
{
    PhotoChooserTask chooser = new PhotoChooserTask();
    chooser.Completed += PickImageCallback;
    chooser.Show();
}

private async void PickImageCallback(object sender, PhotoResult e)
 {
    if (e.TaskResult != TaskResult.OK)
    {
        return;
    }
}

当在回调函数中提供给我们 System.IO.Stream 对象时，我们获取到了图片的内容，这时我们就开始

使用 Nokia Imaging SDK 了。

1、添加下面的命名空间

using Nokia.Graphics.Imaging;
using Nokia.InteropServices.WindowsRuntime;
using System.IO;
using System.Windows.Media.Imaging;
using System.Runtime.InteropServices.WindowsRuntime; 

2、下面的命名空间是从图片库中选择图片和保存图片到图片库

using Microsoft.Phone.Tasks;
using Windows.Storage.Streams;
using Microsoft.Xna.Framework.Media; 

3、在 MainPage.xaml.cs 类中，定义下面的变量：

public partial class MainPage : PhoneApplicationPage

{

    // FilterEffect instance is used to apply different
    // filters to an image.
    // Here we will apply Cartoon filter to an image.
    private FilterEffect _cartoonEffect           =    null;

    // The following  WriteableBitmap contains
    // The filtered and thumbnail image.
    private WriteableBitmap _cartoonImageBitmap      =    null;
    private WriteableBitmap _thumbnailImageBitmap      =    null;
    ...
    ...
}

4、接下来初始化上面定义的变量。在构造函数中初始化：

public Mainpage()
{
    InitializeComponent();

    // Initialize WriteableBitmaps to render the
        // filtered and original image.
        _cartoonImageBitmap = new WriteableBitmap((int)CartoonImage.Width, (int)CartoonImage.Height);
        _thumbnailImageBitmap = new WriteableBitmap((int)OriginalImage.Width, (int)OriginalImage.Height);
}
    

5、当图片选择完成后，我们给图片添加滤镜。这里我们添加 Cartoon 滤镜，然后通过 xaml 中的图片控件（CartoonImage）显示

结果：

private async void PickImageCallback(object sender, PhotoResult e)
  {
    if (e.TaskResult != TaskResult.OK || e.ChosenPhoto == null)
    {
        return;
    }

    try
    {
        // Show thumbnail of original image.
        _thumbnailImageBitmap.SetSource(e.ChosenPhoto);
        OriginalImage.Source = _thumbnailImageBitmap;

        // Rewind stream to start.
        e.ChosenPhoto.Position = ;

        // A cartoon effect is initialized with selected image stream as source.
        var imageStream = new StreamImageSource(e.ChosenPhoto);
        _cartoonEffect = new FilterEffect(imageStream);

        // Add the cartoon filter as the only filter for the effect.
        var cartoonFilter = new CartoonFilter();
        _cartoonEffect.Filters = new[] { cartoonFilter };

        // Render the image to a WriteableBitmap.
        var renderer = new WriteableBitmapRenderer(_cartoonEffect, _cartoonImageBitmap);
        _cartoonImageBitmap = await renderer.RenderAsync();

        // Set the rendered image as source for the cartoon image control.
        CartoonImage.Source = _cartoonImageBitmap;
    }
    catch (Exception exception)
    {
        MessageBox.Show(exception.Message);
        return;
    }

    SaveButton.IsEnabled = true;
}

开始我们把没经过滤镜处理的图片流显示到 _thumbnailImageBitmap 上。

接下来一行把 stream 的 position 设置到开始。这一步很重要。因为经过上一步后，流的位置会在末尾。

接着使用这个图片流（e.ChosenPhoto）初始化 _cartoonEffect。Cartoon 滤镜就被添加到 _cartoonEffect 的滤镜

列表上了。

使用 WriteableBitmapRender 把添加滤镜效果的图片，输出到 _cartoonImageBitmap 对象上。输出到 _cartoonImageBitmap

的操作是异步的；RenderAsync 方法用 _cartoonEffect 中的图片替换掉原图片数据。

然后我们可以使 SaveButton 可用了，保存经过滤镜处理的图片。

添加 capabilities

因为图片数据是从 Pictures 文件夹中读取的，所以需要添加相应的能力。

1、打开清单文件（WMAppManifest.xml）

2、添加 ID_CAP_MEDIALIB_PHOTO :

<Capabilities>
    <Capability Name="ID_CAP_NETWORKING" />
    <Capability Name="ID_CAP_MEDIALIB_AUDIO" />
    <Capability Name="ID_CAP_MEDIALIB_PLAYBACK" />
    <Capability Name="ID_CAP_SENSORS" />
    <Capability Name="ID_CAP_WEBBROWSERCOMPONENT" />
    <Capability Name="ID_CAP_MEDIALIB_PHOTO" />
</Capabilities>

输出并且编码为全像素 JPEG

因为我们有一个 FilterEffect 对象实例，所以输出全像素 JPEG 是很容易的。原始图片的每一个像素

都会经过这个 library 的处理，然后保存为 JPEG。然后 Media library 保存这个由 SDK 输出的

JPEG 文件。

下面的代码演示怎样保持全尺寸的 JPEG：

private async void SaveImage_Click(object sender, RoutedEventArgs e)
{
    SaveButton.IsEnabled = false;

    if (_cartoonEffect == null) {
        return;
    }

    var jpegRenderer = new JpegRenderer(_cartoonEffect);

    // Jpeg renderer gives the raw buffer for the filtered image.
    IBuffer jpegOutput = await jpegRenderer.RenderAsync();

    // Save the image as a jpeg to the saved pictures album.
    MediaLibrary library = new MediaLibrary();
    string fileName = string.Format("CartoonImage_{0:G}", DateTime.Now);
    var picture = library.SavePicture(fileName, jpegOutput.AsStream());

    MessageBox.Show("Image saved!");

    SaveButton.IsEnabled = true;
}

Nokia  WiKi 原文链接：http://developer.nokia.com/Resources/Library/Lumia/#!nokia-imaging-sdk/quick-start.html