与众不同 windows phone (16) Media（媒体）之编辑图片, 保存图片到相册, 与图片的上下文菜单“应用程序...”和“共享...”关联, 与 Windows Phone 的图片中心集成

[索引页]
[源码下载]

与众不同 windows phone (16) - Media（媒体）之编辑图片, 保存图片到相册, 与图片的上下文菜单“应用程序...”和“共享...”关联, 与 Windows Phone 的图片中心集成

作者：webabcd


介绍
与众不同 windows phone 7.5 (sdk 7.1) 之媒体

• 通过 WriteableBitmap 编辑图片，以及保存图片到相册
• 与图片的上下文菜单“应用程序...”关联
• 与图片的上下文菜单“共享...”关联
• 与 Windows Phone 的图片中心集成

示例
1、演示如何通过 WriteableBitmap 编辑图片，以及保存图片到相册
WriteableBitmapDemo.xaml

<phone:PhoneApplicationPage 
    x:Class="Demo.Media.WriteableBitmapDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
    shell:SystemTray.IsVisible="True">

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <StackPanel Orientation="Vertical">
            
            <Image x:Name="img" />

            <Button x:Name="btnSaveToCameraRollAlbum" Content="保存到图片 hub 的“本机拍照”" Click="btnSaveToCameraRollAlbum_Click" />

            <Button x:Name="btnSaveToPictureAlbum" Content="保存到图片 hub 的“相册”" Click="btnSaveToPictureAlbum_Click" />
            
        </StackPanel>
    </Grid>

</phone:PhoneApplicationPage>

WriteableBitmapDemo.xaml.cs

/*
 * 本例演示编解码 jpeg 格式图片，通过 WriteableBitmap 修改图片，以及如何保存图片到图片中心的“本机拍照”和“相册”
 * 
 * Picture - 媒体库中的图片对象
 * MediaLibrary - 媒体库，用于访问设备中的图片、音乐、播放列表等
 *     SavePicture(String, Byte[]), SavePicture(String, Stream) - 保存图片到图片中心的“相册”，第一个参数是保存到媒体库的图片名称，第二个参数是需要被保存的图片数据
 *     SavePictureToCameraRoll(String, Byte[]), SavePictureToCameraRoll(String, Stream) - 保存图片到图片中心的“本机拍照”，第一个参数是保存到媒体库的图片名称，第二个参数是需要被保存的图片数据
 * 注：关于 MediaLibrary 和 Picture 以及其他与媒体库（图片、音乐、播放列表等）相关的介绍详见 Microsoft.Xna.Framework.Media 命名空间下的类：http://msdn.microsoft.com/en-us/library/dd254868(v=xnagamestudio.40)
 * 
 * PictureDecoder.DecodeJpeg(Stream source) - 解码 jpeg 格式文件到 WriteableBitmap 对象（经测试 png 格式也可以）
 * 
 * WriteableBitmap - 位图 API，详见：http://www.cnblogs.com/webabcd/archive/2009/08/27/1554804.html 中的关于 WriteableBitmap 的介绍
 *     SaveJpeg() - 新增的扩展方法，用于将 WriteableBitmap 对象保存为 jpeg 格式文件
 *     LoadJpeg() - 新增的扩展方法，用于将 jpeg 格式图片加载到 WriteableBitmap 对象
 */

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

using System.Windows.Resources;
using System.Windows.Media.Imaging;
using Microsoft.Phone;
using Microsoft.Xna.Framework.Media;
using System.IO.IsolatedStorage;
using System.IO;

namespace Demo.Media
{
    public partial class WriteableBitmapDemo : PhoneApplicationPage
    {
        private WriteableBitmap _wb;

        public WriteableBitmapDemo()
        {
            InitializeComponent();

            ShowImage();
        }

        private void ShowImage()
        {
            Uri imageUri = new Uri("Assets/TileBackgroundBlue.png", UriKind.Relative);
            StreamResourceInfo sri = Application.GetResourceStream(imageUri);
            
            // 将图片流解码为 WriteableBitmap 对象，经测试不只是 jpeg 格式可以，png 格式也可以
            _wb = PictureDecoder.DecodeJpeg(sri.Stream);

            // 将图片的第 10 行的像素点都改为红色
            for (int i = _wb.PixelWidth * 9; i < _wb.PixelWidth * 10; i++)
            {
                unchecked
                {
                    // 每个像素的颜色的描述规范为 ARGB
                    _wb.Pixels[i] = (int)0xFFFF0000;
                }
            }

            // 重新绘制整个 WriteableBitmap 对象
            _wb.Invalidate();

            // 显示修改后的图片
            img.Source = _wb;
        }

        // 将图片保存到图片 hub 的“本机拍照”
        private void btnSaveToCameraRollAlbum_Click(object sender, RoutedEventArgs e)
        {
            // 在独立存储中创建一个临时文件
            string fileName = "myImage.jpg";
            var myStore = IsolatedStorageFile.GetUserStoreForApplication();
            if (myStore.FileExists(fileName))
                myStore.DeleteFile(fileName);
            IsolatedStorageFileStream myFileStream = myStore.CreateFile(fileName);

            // 将图片保存到独立存储的临时文件
            _wb.SaveJpeg(myFileStream, _wb.PixelWidth, _wb.PixelHeight, 0, 85);
            myFileStream.Close();

            // 打开独立存储中的图片
            myFileStream = myStore.OpenFile(fileName, FileMode.Open, FileAccess.Read);

            // 将图片保存到“本机拍照”
            MediaLibrary library = new MediaLibrary();
            Picture pic = library.SavePictureToCameraRoll("SavedPicture.jpg", myFileStream);
        }

        // 将图片保存到图片 hub 的“相册”
        private void btnSaveToPictureAlbum_Click(object sender, RoutedEventArgs e)
        {
            // 在独立存储中创建一个临时文件
            string fileName = "myImage.jpg";
            var myStore = IsolatedStorageFile.GetUserStoreForApplication();
            if (myStore.FileExists(fileName))
                myStore.DeleteFile(fileName);
            IsolatedStorageFileStream myFileStream = myStore.CreateFile(fileName);

            // 将图片保存到独立存储的临时文件
            _wb.SaveJpeg(myFileStream, _wb.PixelWidth, _wb.PixelHeight, 0, 85);
            myFileStream.Close();

            // 打开独立存储中的图片
            myFileStream = myStore.OpenFile(fileName, FileMode.Open, FileAccess.Read);

            // 将图片保存到“相册”
            MediaLibrary library = new MediaLibrary();
            Picture pic = library.SavePicture("SavedPicture.jpg", myFileStream);
        }
    }
}

2、演示如何与图片的上下文菜单“应用程序...”关联
IntegrateWithThePictureViewer.xaml

<phone:PhoneApplicationPage 
    x:Class="Demo.Media.IntegrateWithThePictureViewer"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
    shell:SystemTray.IsVisible="True">

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <TextBlock TextWrapping="Wrap">
            <Run>在“图片中心”中查看某图片，然后点击 AppBar 的“应用程序...”按钮，则会发现本 app 也在选项列表中，也就是说可以使用本 app 打开指定的图片</Run>
            <LineBreak />
            <Run>具体实现方法请参见 manifest 和 MainPage.xaml.cs</Run>
        </TextBlock>
    </Grid>
 
</phone:PhoneApplicationPage>

WMAppManifest.xml

<Extensions>
    <!--
        与图片的上下文菜单“应用程序...”关联，即在“图片中心”中查看某图片，然后点击 AppBar 的“应用程序...”按钮，则会发现本 app 也在选项列表中，也就是说可以使用本 app 打开指定的图片
    -->
    <Extension ExtensionName="Photos_Extra_Viewer" ConsumerID="{5B04B775-356B-4AA0-AAF8-6491FFEA5632}" TaskID="_default" />
</Extensions>

MainPage.xaml.cs

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    // 当使用本 app 打开指定的图片时，会传递过来一个 token 参数
    // 开发时要注意，如果同时使用了 PhotoChooserTask ，要避免冲突
    if (NavigationContext.QueryString.ContainsKey("token"))
    {
        MediaLibrary library = new MediaLibrary();
        // 根据 token 获取到指定的图片
        Picture picture = library.GetPictureFromToken(NavigationContext.QueryString["token"]);

        // 将 Picture 对象转换成 BitmapImage 对象
        BitmapImage bitmap = new BitmapImage();
        bitmap.CreateOptions = BitmapCreateOptions.None;
        bitmap.SetSource(picture.GetImage());

        // 将 BitmapImage 对象转换成 WriteableBitmap 并显示
        WriteableBitmap picLibraryImage = new WriteableBitmap(bitmap);
        img.Source = picLibraryImage;
    }
}

3、演示如何与图片的上下文菜单“共享...”关联
IntegrateWithThePictureShare.xaml

<phone:PhoneApplicationPage 
    x:Class="Demo.Media.IntegrateWithThePictureShare"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
    shell:SystemTray.IsVisible="True">

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <TextBlock TextWrapping="Wrap">
            <Run>在“图片中心”中查看某图片，然后点击 AppBar 的“共享...”按钮，则会发现本 app 也在选项列表中，也就是说可以使用本 app 共享指定的图片</Run>
            <LineBreak />
            <Run>具体实现方法请参见 manifest 和 MainPage.xaml.cs</Run>
        </TextBlock>
    </Grid>

</phone:PhoneApplicationPage>

WMAppManifest.xml

<Extensions>
    <!--
        与图片的上下文菜单“共享...”关联，即在“图片中心”中查看某图片，然后点击 AppBar 的“共享...”按钮，则会发现本 app 也在选项列表中，也就是说可以使用本 app 共享指定的图片
    -->
    <Extension ExtensionName="Photos_Extra_Share" ConsumerID="{5B04B775-356B-4AA0-AAF8-6491FFEA5632}" TaskID="_default" />
</Extensions>

MainPage.xaml.cs

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    // 当使用本 app 共享指定的图片时，会传递过来一个 FileId 参数
    if (NavigationContext.QueryString.ContainsKey("FileId"))
    {
        MediaLibrary library = new MediaLibrary();
        // 根据 FileId 获取到指定的图片
        Picture picture = library.GetPictureFromToken(NavigationContext.QueryString["FileId"]);

        // 将 Picture 对象转换成 BitmapImage 对象
        BitmapImage bitmap = new BitmapImage();
        bitmap.CreateOptions = BitmapCreateOptions.None;
        bitmap.SetSource(picture.GetImage());

        // 将 BitmapImage 对象转换成 WriteableBitmap 并显示
        WriteableBitmap picLibraryImage = new WriteableBitmap(bitmap);
        img.Source = picLibraryImage;
    }
}

4、演示如何与 Windows Phone 的图片中心集成
IntegrateWithThePictureHub.xaml

<phone:PhoneApplicationPage 
    x:Class="Demo.Media.IntegrateWithThePictureHub"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
    shell:SystemTray.IsVisible="True">

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <TextBlock TextWrapping="Wrap">
            <Run>本 app 会出现在“图片中心”中的“应用程序”下</Run>
            <LineBreak />
            <Run>具体实现方法请参见 manifest</Run>
        </TextBlock>
    </Grid>

</phone:PhoneApplicationPage>

WMAppManifest.xml

<Extensions>
    <!--
        与 Windows Phone 的图片中心集成，即将本 app 添加到“图片中心”中的“应用程序”下
    -->
    <Extension ExtensionName="Photos_Extra_Hub" ConsumerID="{5B04B775-356B-4AA0-AAF8-6491FFEA5632}" TaskID="_default" />
</Extensions>

OK
[源码下载]