アーカイブを ASP.NET Web アプリケーションにアップロードする

シナリオ

この記事では、ASP.NET Web アプリケーションのアーカイブ解凍と画像処理に Aspose ライブラリを使用する方法の例を示します。ユーザーケース: サイト訪問者が画像を含む zip アーカイブを Web アプリケーションにアップロードし、すべての画像を特定の角度で回転させます。 これに応じて、回転された画像が同じ Web ページに表示されます。

ASP.NET Web アプリケーションの準備

Visual Studio を使用して、Razor Pages で単純な ASP.NET Core Web アプリケーションを作成します。 NuGet パッケージ マネージャーを使用して、プロジェクトの 2 つのパッケージを参照します。解凍用の Aspose.Zip と画像処理用の Aspose.Imaging です。
ソリューション エクスプローラー内でページ「Index.cshtml」を見つけます。ここで、<form> タグ内の enctype="multipart/form-data" 属性を使用して、そのページにフォームを追加します。ファイルをWebサーバーに転送する必要がありました。次に、2 つの入力フィールドを追加します。1 つはアップロードされたアーカイブ用の file タイプで、もう 1 つは回転角度を指定するための number タイプです。 フォームの完全な HTML マークアップは次のとおりです。

<form method="post" enctype="multipart/form-data">
    <span>Images archive: </span><input type="file" name="uploadedFile" required="required" />
    <br />
    <span>Rotation angle: </span><input type="number" value="30" min="0" max="360" name="rotateDegree" required="required" />
    <br />
    <input type="submit" value="Upload" />
</form>

いくつかの検証属性も追加されました。

ユーザーリクエストの処理

したがって、ユーザーは画像を含む zip アーカイブを提供し、フォームを送信します。サーバー側で彼のリクエストを処理するにはどうすればよいでしょうか? ASP.NET アプローチを使用して、「Index.cshtml.cs」ソースに適切な「OnPost」メソッドを作成する必要があります。このメソッド内では、 適切なコンストラクター を使用して zip アーカイブ を抽出し、各画像を回転します。メソッドの草案は次のとおりです。

public void OnPost(IFormFile uploadedFile, int rotateDegree) {
    using (Archive archive = new Archive(uploadedFile.OpenReadStream())) {
        foreach (ArchiveEntry entry in archive.Entries) {
		   // Extract image and rotate it.
		}
    }
}

画像を回転

Aspose.Imaging ライブラリを使用して、 この手順 に従ってオンザフライ角度で画像を特定の角度で回転します。 回転コードのスニペット:

    using (MemoryStream rotated = new MemoryStream())
    {
        using (RasterImage image = (RasterImage)Image.Load(extracted))
        {
            // Before rotation, the image should be cached for better performance
            if (!image.IsCached)
                image.CacheData();
                    
            image.Rotate(rotateDegree, true, Color.CornflowerBlue);
            image.Save(rotated);
        }                          
    }

ページモデルと画像のレンダリング

それらの画像をレンダリングするには、ページ モデル内に処理中の画像のバイトを格納する必要があります。プロパティ public List<byte[]> ImageBytes { get; を追加します。プライベートセット。 } を IndexModel に変換します。 このリストに処理済みの画像バイトを入力します。 Web ページに表示するには、 データ URI を使用します。画像バイトを Base64 文字列に変換する必要があります。 これは、Index.cshtml にある Razor コードのレンダリングです。

@{
if (Model.ImageBytes != null && Model.ImageBytes.Count > 0) {
        <h4>Rotated images:</h4>
        foreach (byte[] image in Model.ImageBytes) {
            <img src="data:image;base64,@Convert.ToBase64String(image)" width="150"/>
        }
    }
}

応答を終了します

それで、すべてをまとめてください。アーカイブの各エントリは解凍され、次にこれらのバイトから画像が構成され、最後に回転されます。
このサンプルではユーザー ファイルは検証されません。実際のアプリケーションでは、アップロードされたアーカイブとそのコンテンツを検証する必要があります。
以下は最後の OnPost メソッドです。

    public void OnPost(IFormFile uploadedFile, int rotateDegree)
    {
        ImageBytes = new List<byte[]>();

        using (Archive archive = new Archive(uploadedFile.OpenReadStream()))
        {
            foreach (ArchiveEntry entry in archive.Entries)
            {
                if (entry.IsDirectory)
                    continue;

                using (MemoryStream extracted = new MemoryStream())
                {
                    entry.Open().CopyTo(extracted);
                    extracted.Seek(0, SeekOrigin.Begin);
                    using (MemoryStream rotated = new MemoryStream())
                    {
                        using (RasterImage image = (RasterImage)Image.Load(extracted))
                        {
                            if (!image.IsCached)  // Before rotation, the image should be cached for better performance
                                image.CacheData();

                            image.Rotate(rotateDegree, true, Color.CornflowerBlue);
                            image.Save(rotated);
                        }
                        
                        this.ImageBytes.Add(rotated.ToArray());
                    }
                }
            }
        }
    }