ImageKitWebImageKit.htm

ImageKit コントロールは Web アプリケーションにイメージを表示する便利なインターフェイスを提供します。表示形式として、「実寸」、「スケール」、「ストレッチ」があります。さまざまなイメージ形式で表示でき、ブラウザでサポートされていないイメージは自動変換できるので Web ページにきちんと表示されます。ブラウザの違いや同じブラウザでもバージョンが違うせいで、ImageKit コントロールを使用する上での注意点がいくつかあります。以下の手順に従えば、使用するブラウザに関係なくイメージを読込/表示できます。

では、ImageKit コントロールを使用する際の注意点を説明します。

ImageKit.WPF.Web ImageKit コントロールの使用

ImageKit コントロールを使用する際の手順は次の通りです。

1. ツールボックスに ImageKit コントロールを追加する

ImageKit のインストーラが自動的にツールボックスに ImageKit のコントロールを追加します。手動で追加する場合は以下を行います。

   1. ツールボックスでマウスを右クリックし、「タブの追加」を選択する。
   2. 新しいタブに名前を付けたら、そのタブを右クリックし、「アイテムの選択」を選択する。
   3. 「参照」ボタンをクリックし、「Newtone.ImageKit.WPF.Web.ImageKit.dll」を選択する。
   4. 「OK」ボタンをクリックする。

Web フォーム用の ImageKit コントロールと PanWindow コントロールがツールボックスに追加されます。

2. フォームに ImageKit コントロールを貼り付ける

マウスで Web フォームに ImageKit コントロールをドラッグすると、左上端に ImageKit コントロールがデフォルトサイズで表示されます。ImageKit コントロールのサイズ/位置を変える前に、ImageKit コントロールの位置を絶対値に設定します。お使いの Visual Studio のバージョンによって多少手順が異なります。ImageKit コントロールの位置を手動で絶対値に設定するには、html のソースを開き、ImageKit コントロールのタグの Style に "position: absolute;" を入力してください。

<cc1:ImageKit ID="ImageKit1" runat="server" style="position: absolute;" />

位置を絶対値に設定したら、Web フォームの ImageKit コントロールのサイズや位置を設定できます。

3. Http ハンドラの設定

ImageKit コントロールは、ブラウザにイメージをストリーム転送します。ストリーム転送を有効にするには、http ハンドラを設定しなければなりません。方法は２つあります。１つは、Web アプリケーションの web.config ファイルに http ハンドラを設定することです。もう１つは、Web プロジェクトに IkStream.ashx ファイルを追加することです。

Web.Config ファイルを使用する場合：

VS2010 およびそれ以前のバージョンの web.config ファイルに使用するコード：

<system.web>

     <httpHandlers>

          <add verb="*" path="IkStream.ashx" type="Newtone.ImageKit.Web.IkStream" />

     </httpHandlers>

</system.web>

VS2012 およびそれ以降のバージョンの web.config ファイルに使用するコード：

<system.webServer>

     <handlers>

          <add verb="*" path="IkStream.ashx" name="IkStream" type="Newtone.ImageKit.Web.IkStream" />

     </handlers>

</system.webServer>

IkStream.ashx ファイルを使用する場合：

web.config ファイルに http ハンドラを追加する代わりに、http ハンドラをファイルとして追加することができます。ImageKit には IkStream.ashx という http ハンドラのファイルが同梱されているので、このファイルを Web アプリケーションのディレクトリにコピーし、それを Visual Studio のプロジェクトに追加するだけです。これは、ソリューションエクスプローラを右クリックし、[追加] -> [既存の項目] を選択し、IkStream.ashx ファイルを参照することで行えます。

IkStream.ashx ファイルは、ImageKit のインストールディレクトリの「System」フォルダにあります。

4. イメージの読込/表示コードの設定

下記は、TIF ファイルをサーバーからクライアントのブラウザにストリーム転送する、Page_Load イベントのコード例です。

[Visual Basic]
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
     ImageKit1.Url = "abc.tif"
     ImageKit1.LoadImageFromFile()
     ImageKit1.DisplayMode = Newtone.ImageKit.WPF.Web.DisplayMode.Scale
     ImageKit1.Display()
End Sub

[C#]
private void Page_Load(object sender, System.EventArgs e)
{
     ImageKit1.Url="abc.tif";
     ImageKit1.LoadImageFromFile();
     ImageKit1.DisplayMode = Newtone.ImageKit.WPF.Web.DisplayMode.Scale;
     ImageKit1.Display();
}

読み込むイメージは必ず Web アプリケーションに配置してください。つまり、読み込むイメージが Web アプリケーションのルートフォルダか、Web アプリケーションがアクセス可能なサブフォルダになくてはならない、ということです。イメージのパスは、ImageKit1.Url プロパティで設定します。上記の場合、イメージはルートディレクトリにあるので、相対的な仮想パスはイメージのファイル名だけです。
注意：Url プロパティは、Web アプリケーションの仮想パスで設定しなければなりません（物理パスでの設定不可）。詳しくは、Url プロパティを参照してください。

Web.ImageKit メンバ | Newtone.ImageKit.WPF.Web.ImageKit

Web フォームでの ImageKit コントロールの使用

ImageKit.WPF.Web ImageKit コントロールの使用

1. ツールボックスに ImageKit コントロールを追加する

2. フォームに ImageKit コントロールを貼り付ける

3. Http ハンドラの設定

4. イメージの読込/表示コードの設定