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

原文: 与众不同 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
[源码下载]