04、Quick Start for Windows

 

创建一个新工程

1、在 VS 上，选择 File > New > Project..

2、在新工程窗口，选择  Visual C# > Windows Store > Blank App(XAML)

3、点击 OK.

 

向工程中添加类库

在使用 Nokia Imaging SDK 类库中的功能时，首先需要添加相应类库，请参考

Adding libraries to the project.

 

移除 Any CPU platform 选项

Nokia Imaging SDK 支持 ARM 和 X86 平台，不支持 Any CPU 。在编译引用了 Nokia Imaging SDK

的工程前，你必须移除  Any CPU 选项。

1、在 VS 工具栏，选择 Solution Configuration

2、选择 Configuration Manager...

3、从 Platform 中选择  <Edit...> 然后点击 Any   CPU

4、点击 Remove

 

定义你的 XAML UI

这里定义的 UI 很简单，只有两个 XAML image 控件和两个 按钮。一个 Image 控件显示

原图，另一个显示经过滤镜处理的 Image。另外，一个按钮用来选择图片，另一个保存图片。

 

实现步骤

用下面的 XAML 替换 MainPage.xaml 中的 Grid：

<Grid Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <Image x:Name="CartoonImage" Stretch="UniformToFill" Grid.RowSpan="3" />
    <Image x:Name="OriginalImage" Width="334" Height="200" Stretch="UniformToFill" 
            Grid.Row="1" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="12,12,0,0" />

    <TextBlock Text="Nokia Imaging SDK" Grid.Row="0" Style="{StaticResource TitleTextBlockStyle}" />

    <Button Content="Pick an image" Click="PickImage_Click" HorizontalAlignment="Left" Grid.Row="2" />
    <Button Content="Save the image" Click="SaveImage_Click" x:Name="SaveButton" HorizontalAlignment="Right"
         Grid.Row="2" IsEnabled="False" />

</Grid>

从 Camera Roll 中选择图片

接下来在  MainPage.xaml.cs 中使用 Win RT 库中提供的 FileOpenPicker 选择图片：

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

    var openPicker = new FileOpenPicker
    {
        SuggestedStartLocation = PickerLocationId.PicturesLibrary,
        ViewMode = PickerViewMode.Thumbnail
    };

    // Filter to include a sample subset of file types.
    openPicker.FileTypeFilter.Clear();
    openPicker.FileTypeFilter.Add(".bmp");
    openPicker.FileTypeFilter.Add(".png");
    openPicker.FileTypeFilter.Add(".jpeg");
    openPicker.FileTypeFilter.Add(".jpg");

    // Open the file picker.
    StorageFile file = await openPicker.PickSingleFileAsync();

    // file is null if user cancels the file picker.
    if (file != null)
    {
        if (await ApplyFilter(file)) return;

        SaveButton.IsEnabled = true;
    }
}

private async Task<bool> ApplyFilter(StorageFile file)
{
    IRandomAccessStream fileStream = await file.OpenAsync(FileAccessMode.Read);
    
    return false;
}

当用户选择了图片，我们通过 IRandomAccessStream 来打开文件。

 

使用 FilterEffect 来为图片添加一个 effect

1、添加下面的命名空间，来自 SDK

using Nokia.Graphics.Imaging;
using Windows.UI.Xaml.Media.Imaging;

2、下面的命名空间用来 “选择”  和 “保存” 图片

using Windows.Storage.Streams;
using Windows.Storage.Pickers;
using Windows.Storage;

3、在 MainPage.xaml.cs 中，定义以下成员变量：

public sealed partial class MainPage : Page
{
    // FilterEffect instance is used to apply different
    // filters to an image.
    // Here we will apply Cartoon filter to an image.
    private FilterEffect _cartoonEffect;

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

 

4、然后在构造函数中，初始化这些变量：

public MainPage()
{
    InitializeComponent();
            
    Rect bounds = Window.Current.Bounds;

    _cartoonImageBitmap = new WriteableBitmap((int)bounds.Width, (int)bounds.Height);
    _thumbnailImageBitmap = new WriteableBitmap((int)OriginalImage.Width, (int)OriginalImage.Height);
}

 

5、当用户选择完图片，我们就为图片添加滤镜。在这里我们添加 Cartoon 滤镜，然后把结果显示到 XAML

上的 Image 控件（CartoonImage）：

private async Task<bool> ApplyFilter(StorageFile file)
{
    // Open a stream for the selected file.
    IRandomAccessStream fileStream = await file.OpenAsync(FileAccessMode.Read);

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

        // Rewind stream to start.                     
        fileStream.Seek(0);

        // A cartoon effect is initialized with selected image stream as source.
        var imageStream = new RandomAccessStreamImageSource(fileStream);
        _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)
    {
        var dia = new MessageDialog(exception.Message);
    dia.ShowAsync();
        return true;
    }
    return false;
}

 

添加相应的权限

因为应用程序需要从 Pictures 文件夹读取数据，所以需要添加相应的权限：

1、在 VS 解决方案中，打开package.appxmanifest

2、选择 Capabilities  选项卡，然后选择Pictures Library，如下图：

 

生成和编码全尺寸 JPEG 图片

使用 FilterEffect 类的对象来输出全尺寸 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();

    var picker = new FileSavePicker();
    picker.FileTypeChoices.Add("JPG File", new List<string>   { ".jpg" });
    picker.SuggestedFileName = string.Format("CartoonImage_{0:G}", DateTime.Now);
    StorageFile file = await picker.PickSaveFileAsync();

    if (file != null)
    {
        using (IRandomAccessStream stream = await file.OpenAsync(FileAccessMode.ReadWrite))
        {
            await stream.WriteAsync(jpegOutput);
            await stream.FlushAsync();
        }
    }

    SaveButton.IsEnabled = true;
}

 

获取完整源码：点击获取

 

原文链接