DeepZoomで巨大イメージをBlogで表示する

最近、XAMLのお勉強をしているのだが、DeepZoomで巨大イメージをBlog内で表示できるか試してみた。

Deep Zoom Composerで生成されるXAPが気に入らなかったので修正。

<param name="initParams" value="Source=http://www.cagylogic.com/data/dzc_output.xml" />

のようにパラメータでイメージピラミッドの場所を指定できるようにした。

このパラメータはApplicationクラスのStartupイベントに、StartupEventArgsとしてやってくる。e.InitParamsには、IDictionary<string, string>でパラメータがやってくるので、Sourceという文字列で引っ張り出して、multiScaleImage.Sourceに放り込んでやればよし。multiScaleImage.Sourceには、

if (initParams.ContainsKey("Source"))
{
multiScaleImage.Source = new DeepZoomImageTileSource(new Uri(initParams["Source"]));
}

で、実験したページがこれ

おぉ、できてるできてる。

次に埋め込み。

<script type="text/javascript" src="http://www.cagylogic.com/Silverlight.js" />
<object data="data:application/x-silverlight," type="application/x-silverlight-2"  width="450px" height="300px">
  <param name="source" value="http://www.cagylogic.com/download/DeepZoom.xap"/>
  <param name="bakground" value="black" />
  <param name="minRuntimeVersion" value="2.0.31005.0" />
  <param name="autoUpgrade" value="true" />
  <param name="initParams"  value="Source=http://www.cagylogic.com/data/DeepZoom/20090216/dzc_output.xml" >
  <a href="http://go.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;">
    <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Microsoft Silverlight を取得" style="border-style: none"/>
  </a> 
</object>

手な感じで、埋めればOKと思われる。これなら、いちいちXAPをコンパイルし直さなくてもURLだけ指定すればOK。

Microsoft Silverlight を取得

もし、「Microsoft Silverlight を取得」と表示されたなら、クリックして、Silverlightをインストールして試してほしい。

クリックでズームイン、SHIFT+クリックでズームアウト、マウスドラッグでパンができる。
マウスのホイールでもズームイン、ズームアウトができる。

右下にひっそり置かれている zoomin_restzoomout_rest でもズームイン、ズームアウト可能。迷子になったときは、home_restで振り出しに戻る。fullscreen_restを押すとフルスクリーンで遊べる。フルスクリーンから抜けるのは、「ESC」キーを押す。

さて、どうでしょう。。。

これだと、Canon KissDNで撮影した、3456×2304という巨大解像度もそのままアップできるな。

コメントを残す