與眾不同 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
[源碼下載]