ピクチャーハブに画像を保存する
WP7では、共通のメディアライブラリに保存されている画像データをPictureハブアプリから閲覧したり、他のアプリケーションから参照したりすることができます。
※他のアプリケーションから参照する方法は以下の記事を参考にどうぞ。
ピクチャーハブを利用する
本エントリでは、UIコントロールのキャプチャをPictureハブへ画像を保存する方法を紹介していきます。
エントリの内容の概略は以下の通りです。
- Pictureハブへの画像保存方法
- UIコントロールをキャプチャする(スクリーンショットの様な)方法
詳しくはつづきをどうぞ。
下準備
まず、参照とusing属性を追加します。
Microsoft.Xna.Framework.Mediaを利用するために、Microsoft.Xna.Frameworkを参照に追加します。
また、using属性として以下4つの項目を追加します。
＃コメントでそれぞれ下記ソースコードのどのクラスで必要か明示しています。
1 2 3 4 | using System.Windows.Resources; //StreamResourceInfousing System.IO.IsolatedStorage; //IsolatedStorageFileusing System.Windows.Media.Imaging; // BitmapImageusing Microsoft.Xna.Framework.Media; //MediaLibrary |
Pictureハブに保存を行う
Pictureハブに画像データを保存するためには、MediaLibraryクラスのSavePictureメソッドを利用します。
SavePictureメソッド以外にも、SavePictureToCameraRollメソッドが用意されており、Pictureハブ内のどの場所に画像データを置くか選択することができます。
どちらのメソッドも引数は同じで、第一引数に保存ファイル名、第二引数に保存する画像データのStreamを指定します。
該当のサンプルコードは以下の通りです。
SavePictureメソッドの第二引数に指定するStreamは、分離ストレージのファイルストリームを取得できる、IsolatedStorageFileクラスのOpenFileメソッドを利用して取得しています。
1 2 3 4 5 6 7 8 9 | // storeからfilestreamを取得fileStream = appStore.OpenFile(name, System.IO.FileMode.Open, System.IO.FileAccess.Read);MediaLibrary lib = new MediaLibrary();// 保存処理Picture picture = lib.SavePicture("claudia_san.jpg",fileStream);// picture = lib.SavePictureToCameraRoll("claudia_san.jpg",fileStream);fileStream.Close(); |
7行目でclaudia_san.jpgを「saved pictureアルバム」へ保存しています。8行目のコメントアウトの保存メソッドを利用すると、カメラロール内に保存することができます。
WriteableBitmapを利用して、Bitmapを作成する
今回はクラウディアさんの画像を利用しました。
クラウディアさんの画像を利用する際にはコピーライト表記を入れる必要があるため、以下のようなXAML構成としました。
1 2 3 4 5 | <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <Button Content="Save" Height="72" HorizontalAlignment="Left" Margin="-12,0,0,0" Name="button1" VerticalAlignment="Top" Width="160" Click="button1_Click" /> <Image Height="523" HorizontalAlignment="Left" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="450" Source="/PictureSaveSample;component/Images/クラウディアSD2.jpg" /> <TextBlock Height="30" HorizontalAlignment="Left" Margin="0,493,0,0" Name="textBlock1" Text="© 2011 Microsoft Corporation All Rights Reserved. " VerticalAlignment="Top" Foreground="Black" /></Grid> |
しかし、Imageコントロールに配置したJpegファイルをそのままPictureハブ保存用のストリームに渡すと、コピーライト表記を行っているTextBlockが画像として保存できません。
WriteableBitmapクラスには、UIコントロールを画像として書き出す機能があるため、下記の様にImageコントロールとTextBlockを含んだGridパネルを用意し、Gridパネルごと画像として書き出しています。
1 2 3 4 | <Grid Height="529" HorizontalAlignment="Left" Margin="12,78,0,0" Name="saved_grid" VerticalAlignment="Top" Width="468" Grid.Row="1"> <Image Height="523" HorizontalAlignment="Left" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="450" Source="/PictureSaveSample;component/Images/クラウディアSD2.jpg" /> <TextBlock Height="30" HorizontalAlignment="Left" Margin="0,493,0,0" Name="textBlock1" Text="© 2011 Microsoft Corporation All Rights Reserved. " VerticalAlignment="Top" Foreground="Black" /></Grid> |
WriteableBitmapを作成し、Jpegファイルを分離ストレージに保存する処理部は以下の引用のようになります。
分離ストレージの利用法については、こちらの記事を参考にどうぞ。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | // 分離ストレージへの保存ファイルの名前String name = "claudia_jpeg";// 分離ストレージへにテンポラリを保存するためにvar appStore = IsolatedStorageFile.GetUserStoreForApplication();if (appStore.FileExists(name)){ appStore.DeleteFile(name);}IsolatedStorageFileStream fileStream = appStore.CreateFile(name);WriteableBitmap saveLayout = new WriteableBitmap(saved_grid,null);// 一度storeに保存するsaveLayout.SaveJpeg(fileStream, saveLayout.PixelWidth, saveLayout.PixelHeight, 0, 85);fileStream.Close(); |
13行目でWriteableBimapクラスを生成しています。
第一引数に上記XAMLコード内で引用した、Gridパネルのsaved_gridを指定しています。
その後、16行目にてJpeg保存を行っています。
SaveJpegメソッドの引数には、ファイルストリーム、縦幅、横幅、Jpegの向き、Jpegのクォリティを指定しています。
本エントリのサンプルで保存した画像は以下のとおりです。
コピーライト表記が画像として反映されています。
About The Author
