ASP.NET Web ページ (Razor) サイトでのイメージの操作

[アーティクル]
07/13/2023

この記事では、ASP.NET Web ページ (Razor) Web サイトで画像の追加、表示、操作 (サイズ変更、反転、透かしの追加) を行う方法について説明します。

ここでは、次の内容について学習します。

ページに画像を動的に追加する方法。

ユーザーが画像をアップロードできるようにする方法。

画像のサイズを変更する方法。

画像を反転または回転する方法。

透かしを画像に追加する方法。

画像を透かしとして使用する方法。

この記事で紹介する ASP.NET プログラミング機能を次に示します。

WebImageヘルパー。

オブジェクト。 Path パスとファイル名を操作できるメソッドを提供します。

チュートリアルで使用するソフトウェアのバージョン

ASP.NET Web ページ (Razor) 2

WebMatrix 2

このチュートリアルは、WebMatrix 3 でも動作します。

Web ページへのイメージの動的な追加

Web サイトの開発中に、Web サイトと個々のページに画像を追加できます。また、ユーザーに画像のアップロードを許可することもできます。これは、プロフィール写真の追加などのタスクに役立つ場合があります。

サイトで画像が既に使用可能で、ページに表示するだけの場合は、次のような HTML <img> 要素を使用します。

<img src="images/Photo1.jpg" alt="Sample Photo" />

ただし、場合によっては、画像を動的に表示できる必要があります。つまり、ページが実行されるまで表示する画像がわからない場合があります。

このセクションの手順では、ユーザーがイメージ名の一覧からイメージファイル名を指定する画像をその場で表示する方法を示します。ドロップダウンリストから画像の名前を選択し、ページを送信すると、選択した画像が表示されます。

[スクリーンショットは、ドロップダウンリストから選択された後に表示される画像を示しています。]

WebMatrix で、新しい Web サイトを作成します。
DynamicImage.cshtml という名前の新しいページを追加します。
Web サイトのルートフォルダーに新しいフォルダーを追加し、画像に名前を付 けます。
作成した images フォルダーに 4 つの イメージ を追加します。 (便利な画像はすべて行いますが、ページに収まる必要があります)。イメージの名前を Photo1.jpg、Photo2.jpg、 Photo3.jpg、および Photo4.jpgの名前を変更します。 (この手順では Photo4.jpg を使用しませんが、この記事の後半で使用します)。
4 つのイメージが読み取り専用としてマークされていないことを確認します。
ページ内の既存のコンテンツを次のように置き換えます。
```
@{  var imagePath= "";
    if( Request["photoChoice"] != null){
        imagePath = @"images\" + Request["photoChoice"];
   }
}
<!DOCTYPE html>
<html>
<head>
  <title>Display Image on the Fly</title>
</head>
<body>
<h1>Displaying an Image On the Fly</h1>
<form method="post" action="">
    <div>
        I want to see:
        <select name="photoChoice">
            <option value="Photo1.jpg">Photo 1</option>
            <option value="Photo2.jpg">Photo 2</option>
            <option value="Photo3.jpg">Photo 3</option>
        </select>
        &nbsp;
        <input type="submit" value="Submit" />
    </div>
    <div style="padding:10px;">
        @if(imagePath != ""){
            <img src="@imagePath" alt="Sample Image" width="300px" />
        }
    </div>
</form>
</body>
</html>
```
ページの本文には、という名前photoChoiceのドロップダウンリスト (<select>要素) があります。リストには 3 つのオプションがあり value 、各リストオプションの属性には images フォルダーに 配置したイメージの 1 つの名前があります。基本的に、リストではユーザーが "Photo 1" のようなフレンドリ名を選択し、ページの送信時 に.jpg ファイル名を渡します。

コードでは、を読み取 Request["photoChoice"]ることで、ユーザーの選択 (つまり、イメージファイル名) を一覧から取得できます。最初に、選択内容がまったく存在するかどうかを確認します。存在する場合は、イメージのフォルダー名とユーザーのイメージファイル名で構成されるイメージのパスを作成します。 (パスを作成しようとしたが、に Request["photoChoice"]何もなかった場合は、エラーが発生します)。これにより、次のような相対パスが作成されます。

images/Photo1.jpg

パスは、後でページで必要になるという名前 imagePath の変数に格納されます。

本文には、ユーザーが選択した <img> 画像を表示するために使用される要素もあります。 src静的要素を表示する場合と同様に、属性はファイル名または URL に設定されません。代わりに、に @imagePath設定されます。つまり、コードで設定したパスから値を取得します。

ただし、ページを初めて実行すると、ユーザーが何も選択していないため、表示する画像はありません。これは通常、属性が src 空で、画像が赤い "x" (またはイメージが見つからないときにブラウザーがレンダリングするもの) として表示されることを意味します。これを防ぐために、変数に <img> 何かが含まれているかどうかをテストするブロックに要素 if を imagePath 配置します。ユーザーが選択を行った場合は、 imagePath パスが含まれます。ユーザーが画像を選択しなかった場合、またはページが初めて表示される場合、 <img> 要素はレンダリングされません。
ファイルを保存し、ブラウザーでページを実行します。 (ページを実行する前に、[ ファイル ] ワークスペースでページが選択されていることを確認してください)。
ドロップダウンリストから画像を選択し、[ サンプルイメージ] をクリックします。さまざまな選択肢に対して異なる画像が表示されていることを確認します。

画像のアップロード

前の例では、画像を動的に表示する方法を示しましたが、Web サイトに既に存在する画像でのみ機能しました。この手順では、ユーザーが画像をアップロードできるようにする方法を示します。画像がページに表示されます。 ASP.NET では、ヘルパーを使用して WebImage 画像を即座に操作できます。このヘルパーには、画像を作成、操作、保存できるメソッドがあります。ヘルパーは WebImage 、.jpg、 .png、.bmpなど、すべての一般的な Web イメージファイルの種類をサポートしています。この記事では、 .jpg イメージを使用しますが、任意の種類の画像を使用できます。

[[イメージのアップロード] ページを示すスクリーンショット。

新しいページを追加し、 UploadImage.cshtml という名前を付けます。
ページ内の既存のコンテンツを次のように置き換えます。
```
@{  WebImage photo = null;
    var newFileName = "";
    var imagePath = "";

    if(IsPost){
        photo = WebImage.GetImageFromRequest();
        if(photo != null){
            newFileName = Guid.NewGuid().ToString() + "_" +
                Path.GetFileName(photo.FileName);
            imagePath = @"images\" + newFileName;

            photo.Save(@"~\" + imagePath);
        }
    }
}
<!DOCTYPE html>
<html>
<head>
  <title>Image Upload</title>
</head>
<body>
  <form action="" method="post" enctype="multipart/form-data">
    <fieldset>
      <legend> Upload Image </legend>
      <label for="Image">Image</label>
      <input type="file" name="Image" />
      <br/>
      <input type="submit" value="Upload" />
    </fieldset>
  </form>
  <h1>Uploaded Image</h1>
    @if(imagePath != ""){
    <div class="result">
        <img src="@imagePath" alt="image" />

    </div>
    }
</body>
</html>
```
テキストの本文には要素があり <input type="file"> 、ユーザーはアップロードするファイルを選択できます。 [ 送信] をクリックすると、選択したファイルがフォームと共に送信されます。

アップロードされた画像を取得するには、ヘルパーを WebImage 使用します。このヘルパーには、画像を操作するためのさまざまな便利なメソッドがあります。具体的には、を使用 WebImage.GetImageFromRequest してアップロードされたイメージ (存在する場合) を取得し、という名前 photoの変数に格納します。

この例の作業の多くは、ファイル名とパス名の取得と設定を含みます。問題は、ユーザーがアップロードしたイメージの名前 (および名前のみ) を取得し、イメージを保存する場所の新しいパスを作成することです。ユーザーは同じ名前の複数の画像をアップロードする可能性があるため、一意の名前を作成し、ユーザーが既存の画像を上書きしないように、少しの追加コードを使用します。

イメージが実際にアップロードされている場合 (テスト if (photo != null))、イメージのプロパティからイメージ FileName 名を取得します。ユーザーがイメージをアップロードすると、 FileName ユーザーの元の名前が含まれます。これには、ユーザーのコンピューターからのパスが含まれます。のようなものであるはずです

C:\Users\Joe\Pictures\SamplePhoto1.jpg

ただし、すべてのパス情報は必要ありません。実際のファイル名 (SamplePhoto1.jpg) だけが必要です。次のように、メソッドを使用 Path.GetFileName して、パスからファイルだけを取り除くことができます。
```
Path.GetFileName(photo.FileName)
```
次に、元の名前に GUID を追加して、新しい一意のファイル名を作成します。 (GUID の詳細については、この記事の後半の「GUID について」を参照してください)。次に、イメージの保存に使用できる完全なパスを作成します。保存パスは、新しいファイル名、フォルダー (画像)、および現在の Web サイトの場所で構成されます。

Note

コードで images フォルダーにファイルを保存するには、そのフォルダーの読み取り/書き込みアクセス許可がアプリケーションに必要です。開発用コンピューターでは、これは通常問題ではありません。ただし、ホスティングプロバイダーの Web サーバーにサイトを発行する場合は、それらのアクセス許可を明示的に設定する必要がある場合があります。ホスティングプロバイダーのサーバーでこのコードを実行し、エラーが発生した場合は、ホスティングプロバイダーにチェックして、それらのアクセス許可を設定する方法を確認します。

最後に、ヘルパーのメソッドに保存パスをSaveWebImage渡します。これにより、アップロードされたイメージが新しい名前で格納されます。 save メソッドは、次のようになります。 photo.Save(@"~\" + imagePath) 完全なパスがに @"~\"追加されます。これは現在の Web サイトの場所です。 (演算子の詳細 ~ については、「 Razor 構文を使用した ASP.NET Web プログラミングの概要」を参照してください)。

前の例と同様に、ページの本文には、画像を <img> 表示する要素が含まれています。が設定されている場合 imagePath 、 <img> 要素がレンダリングされ、その src 属性が値に imagePath 設定されます。
ブラウザーでページを実行します。
画像をアップロードし、ページに表示されていることを確認します。
サイトで、 images フォルダーを開きます。ファイル名が次のような新しいファイルが追加されていることがわかります。

45ea4527-7ddd-4965-b9ca-c6444982b342_MyPhoto.png

これは、名前にプレフィックスが付いた GUID でアップロードした画像です。 (独自のファイルには異なる GUID があり、 MyPhoto.pngとは異 なる名前が付けられている可能性があります)。

ヒント

GUID について

GUID (グローバルに一意の ID) は、通常、のような 936DA01F-9ABD-4d9d-80C7-02AF85C822A8形式でレンダリングされる識別子です。数字と文字 (A から F) は GUID ごとに異なりますが、すべて 8-4-4-4-12 文字のグループを使用するパターンに従います。 (技術的には、GUID は 16 バイト/128 ビット番号です)。GUID が必要な場合は、GUID を生成する特殊なコードを呼び出すことができます。 GUID の背後にある考え方は、数値の膨大なサイズ (3.4 x 10³⁸) とそれを生成するためのアルゴリズムの間で、結果の数は事実上一種の 1 つであることが保証されるということです。したがって、GUID は、同じ名前を 2 回使用しないことを保証する必要がある場合に、物事の名前を生成するのに適した方法です。もちろん、欠点は、GUID が特に使いやすいので、名前がコードでのみ使用される場合に使用される傾向があるということです。

イメージのサイズ変更

Web サイトでユーザーからの画像を受け入れる場合は、表示または保存する前に画像のサイズを変更できます。これに対してヘルパーをもう WebImage 一度使用できます。

この手順では、アップロードした画像のサイズを変更してサムネイルを作成し、サムネイルと元の画像を Web サイトに保存する方法を示します。ページにサムネイルを表示し、ハイパーリンクを使用して、ユーザーをフルサイズの画像にリダイレクトします。

[サムネイル画像ページを示すスクリーンショット。]

Thumbnail.cshtml という名前の新しいページを追加します。
images フォルダーに thumbs という名前のサブフォルダーを作成します。
ページ内の既存のコンテンツを次のように置き換えます。
```
@{  
    WebImage photo = null;
    var newFileName = "";
    var imagePath = "";
    var imageThumbPath  = "";

    if(IsPost){
        photo = WebImage.GetImageFromRequest();
        if(photo != null){
             newFileName = Guid.NewGuid().ToString() + "_" +
                 Path.GetFileName(photo.FileName);
             imagePath = @"images\" + newFileName;
             photo.Save(@"~\" + imagePath);

            imageThumbPath = @"images\thumbs\" + newFileName;
            photo.Resize(width: 60, height: 60, preserveAspectRatio: true,
               preventEnlarge: true);
            photo.Save(@"~\" + imageThumbPath);        }
    }
}
<!DOCTYPE html>
<html>
<head>
  <title>Resizing Image</title>
</head>
<body>
<h1>Thumbnail Image</h1>
  <form action="" method="post" enctype="multipart/form-data">
    <fieldset>
      <legend> Creating Thumbnail Image </legend>
      <label for="Image">Image</label>
      <input type="file" name="Image" />
      <br/>
      <input type="submit" value="Submit" />
    </fieldset>
  </form>
    @if(imagePath != ""){
    <div class="result">
        <img src="@imageThumbPath" alt="Thumbnail image" />
        <a href="@Html.AttributeEncode(imagePath)" target="_Self">
            View full size
        </a>
    </div>

    }
</body>
</html>
```
このコードは、前の例のコードに似ています。違いは、このコードでは、イメージのサムネイルコピーを作成した後に、通常 1 回と 1 回、イメージを 2 回保存することです。まず、アップロードした画像を取得し、 images フォルダーに保存します。次に、サムネイル画像の新しいパスを作成します。サムネイルを実際に作成するには、ヘルパーの Resize メソッドをWebImage呼び出して、60 ピクセル x 60 ピクセルの画像を作成します。この例では、縦横比を維持する方法と、画像が拡大されないようにする方法を示します (新しいサイズが実際に画像を大きくする場合)。サイズ変更されたイメージは、 thumbs サブフォルダーに保存されます。

マークアップの最後には、前の例で見た動的src属性と同じ<img>要素を使用して、画像を条件付きで表示します。この場合は、サムネイルを表示します。要素を <a> 使用して、大きなバージョンのイメージへのハイパーリンクを作成することもできます。要素の src 属性と同様に <img> 、要素の属性を href<a> に動的に imagePath設定します。パスが URL として機能することを確認するには、メソッドにHtml.AttributeEncodeを渡imagePathします。このメソッドは、パス内の予約文字を URL で問題のある文字に変換します。
ブラウザーでページを実行します。
写真をアップロードし、サムネイルが表示されていることを確認します。
サムネイルをクリックすると、フルサイズの画像が表示されます。
画像と画像/サムで、新しいファイルが追加されていることに注意してください。

画像の回転と反転

ヘルパーを WebImage 使用すると、画像を反転および回転させることもできます。この手順では、サーバーからイメージを取得し、イメージを上下に反転して保存し、反転したイメージをページに表示する方法を示します。この例では、サーバーに既に存在するファイル (Photo2.jpg) を使用しています。実際のアプリケーションでは、前の例のように、名前を動的に取得するイメージを反転させる可能性があります。

[[イメージの上下反転] ページを示すスクリーンショット。

FlipImage.cshtml という名前の新しいページを追加します。
ページ内の既存のコンテンツを次のように置き換えます。
```
@{  var imagePath= "";
    WebImage photo = new WebImage(@"~\Images\Photo2.jpg");
    if(photo != null){
        imagePath = @"images\Photo2.jpg";
        photo.FlipVertical();
        photo.Save(@"~\" + imagePath);
     }
}
<!DOCTYPE html>
<html>
<head>
  <title>Get Image From File</title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
<h1>Flip Image Vertically</h1>
@if(imagePath != ""){
  <div class="result">
    <img src="@imagePath" alt="Image" />
  </div>
}
</body>
</html>
```
このコードでは、ヘルパーを WebImage 使用してサーバーからイメージを取得します。前の例でイメージを保存するために使用したのと同じ手法を使用してイメージへのパスを作成し、を使用して WebImageイメージを作成するときにそのパスを渡します。
```
WebImage photo = new WebImage(@"~\Images\Photo2.jpg");
```
イメージが見つかった場合は、前の例と同様に、新しいパスとファイル名を作成します。イメージを反転するには、メソッドを FlipVertical 呼び出し、イメージをもう一度保存します。

属性がに設定された要素srcを使用<img>して、イメージがページにimagePath再び表示されます。
ブラウザーでページを実行します。 Photo2.jpgの画像は上下逆さまで表示されます。
ページを更新するか、ページをもう一度要求して、イメージが右に反転されていることを確認します。

イメージをローテーションするには、またはを呼び出す代わりにまたは FlipHorizontalを呼び出FlipVerticalす点を除き、同じコードをRotateLeft使用しますRotateRight。

透かしを画像に追加する

Web サイトに画像を追加する場合は、画像を保存またはページに表示する前に、透かしを画像に追加する必要があります。 Peopleは、多くの場合、透かしを使用して画像に著作権情報を追加したり、ビジネス名をアドバタイズしたりします。

[イメージへの透かしの追加] ページを示すスクリーンショット。

Watermark.cshtml という名前の新しいページを追加します。
ページ内の既存のコンテンツを次のように置き換えます。
```
@{  var imagePath= "";
    WebImage photo = new WebImage(@"~\Images\Photo3.jpg");
    if(photo != null){
        imagePath = @"images\Photo3.jpg";
        photo.AddTextWatermark("My Watermark", fontColor:"Yellow", fontFamily:
            "Arial");
        photo.Save(@"~\" + imagePath);    }
}
<!DOCTYPE html>
<html>
<head>
  <title>Water Mark</title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
<h1>Adding a Watermark to an Image</h1>
@if(imagePath != ""){
  <div class="result">
    <img src="@imagePath" alt="Image" />
  </div>
}
</body>
</html>
```
このコードは、以前の FlipImage.cshtml ページのコードに似ています (今回は Photo3.jpg ファイルを使用します)。透かしを追加するには、イメージを保存する前に WebImage ヘルパーの AddTextWatermark メソッドを呼び出します。の呼び出し AddTextWatermarkでは、"My Watermark" というテキストを渡し、フォントの色を黄色に設定し、フォントファミリを Arial に設定します。 (ここには示されていませんが、 WebImage ヘルパーを使用すると、不透明度、フォントファミリとフォントサイズ、透かしテキストの位置を指定することもできます)。イメージを保存するときは、読み取り専用にしないでください。

前に見たように、src 属性がに設定された要素を <img> 使用して、画像がページに @imagePath表示されます。
ブラウザーでページを実行します。画像の右下隅にあるテキスト "My Watermark" に注目してください。

透かしとしての画像の使用

透かしにテキストを使用する代わりに、別の画像を使用できます。 People会社のロゴのような画像を透かしとして使用したり、著作権情報にテキストではなく透かし画像を使用したりする場合があります。

[透かしとして画像を使用する] ページを示すスクリーンショット。

ImageWatermark.cshtml という名前の新しいページを追加します。
ロゴとして使用できるイメージフォルダーに イメージ を追加し、 MyCompanyLogo.jpgイメージの名前を変更します。この画像は、幅が 80 ピクセル、高さ 20 ピクセルに設定されている場合に明確に確認できる画像である必要があります。
ページ内の既存のコンテンツを次のように置き換えます。
```
@{  var imagePath = "";
   WebImage WatermarkPhoto = new WebImage(@"~\" +
        @"\Images\MyCompanyLogo.jpg");
    WebImage photo = new WebImage(@"~\Images\Photo4.jpg");
    if(photo != null){
        imagePath = @"images\Photo4.jpg";
        photo.AddImageWatermark(WatermarkPhoto, width: 80, height: 20,
           horizontalAlign:"Center", verticalAlign:"Bottom",
           opacity:100,  padding:10);
      photo.Save(@"~\" + imagePath);
   }
}
<!DOCTYPE html>
<html>
<head>
  <title>Image Watermark</title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
  <h1>Using an Image as a Watermark</h1>
  @if(imagePath != ""){
    <div class="result">
      <img src="@imagePath" alt="Image" />
    </div>
  }
</body>
</html>
```
これは、前の例のコードのもう 1 つのバリエーションです。この場合は、を呼び出 AddImageWatermark して、イメージを保存する前に、ターゲットイメージ (Photo3.jpg) に透かしイメージを追加します。を呼び出 AddImageWatermarkすときは、幅を 80 ピクセルに、高さを 20 ピクセルに設定します。 MyCompanyLogo.jpgイメージは、中央に水平方向に配置され、ターゲットイメージの下部に垂直方向に配置されます。不透明度は 100% に設定され、パディングは 10 ピクセルに設定されます。透かしの画像がターゲットイメージよりも大きい場合、何も起こりません。透かしの画像がターゲットイメージよりも大きく、イメージの透かしの埋め込みを 0 に設定した場合、透かしは無視されます。

前と同様に、要素と動的src属性を<img>使用して画像を表示します。
ブラウザーでページを実行します。透かしの画像がメインイメージの下部に表示されます。

その他のリソース

ASP.NET Web ページサイトでのファイルの操作

Razor 構文を使用した ASP.NET Web ページプログラミングの概要

ASP.NET Web ページ (Razor) サイトでのイメージの操作

チュートリアルで使用するソフトウェアのバージョン

Web ページへのイメージの動的な追加

画像のアップロード

GUID について

イメージのサイズ変更

画像の回転と反転

透かしを画像に追加する

透かしとしての画像の使用

その他のリソース

フィードバック

フィードバック

その他のリソース