ピクチャーハブに画像を保存する
|WP7では、共通のメディアライブラリに保存されている画像データをPictureハブアプリから閲覧したり、他のアプリケーションから参照したりすることができます。
※他のアプリケーションから参照する方法は以下の記事を参考にどうぞ。
ピクチャーハブを利用する
本エントリでは、UIコントロールのキャプチャをPictureハブへ画像を保存する方法を紹介していきます。
エントリの内容の概略は以下の通りです。
- Pictureハブへの画像保存方法
- UIコントロールをキャプチャする(スクリーンショットの様な)方法
詳しくはつづきをどうぞ。
下準備
まず、参照とusing属性を追加します。
Microsoft.Xna.Framework.Mediaを利用するために、Microsoft.Xna.Frameworkを参照に追加します。
また、using属性として以下4つの項目を追加します。
#コメントでそれぞれ下記ソースコードのどのクラスで必要か明示しています。
using System.Windows.Resources; //StreamResourceInfo using System.IO.IsolatedStorage; //IsolatedStorageFile using System.Windows.Media.Imaging; // BitmapImage using Microsoft.Xna.Framework.Media; //MediaLibrary
Pictureハブに保存を行う
Pictureハブに画像データを保存するためには、MediaLibraryクラスのSavePictureメソッドを利用します。
SavePictureメソッド以外にも、SavePictureToCameraRollメソッドが用意されており、Pictureハブ内のどの場所に画像データを置くか選択することができます。
どちらのメソッドも引数は同じで、第一引数に保存ファイル名、第二引数に保存する画像データのStreamを指定します。
該当のサンプルコードは以下の通りです。
SavePictureメソッドの第二引数に指定するStreamは、分離ストレージのファイルストリームを取得できる、IsolatedStorageFileクラスのOpenFileメソッドを利用して取得しています。
// 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構成としました。
<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パネルごと画像として書き出しています。
<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ファイルを分離ストレージに保存する処理部は以下の引用のようになります。
分離ストレージの利用法については、こちらの記事を参考にどうぞ。
// 分離ストレージへの保存ファイルの名前 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のクォリティを指定しています。
本エントリのサンプルで保存した画像は以下のとおりです。
コピーライト表記が画像として反映されています。