System.Drawing in Blazor WebAssembply App C#

Blazorフレームワークは、Webテクノロジーでインタラクティブで再利用可能なWebUIを構築するために広く使用されています。さらに、Blazor WebAssemblyアプリは、WebAssemblyベースの.NETランタイムのブラウザーで直接実行されます。この記事では、BlazorWebAssemblyアプリでSystem.Drawingライブラリを使用する方法について説明します。 APIを使用して、テキスト文字列、画像、ベクターグラフィックなどを描画できます。詳細については、次の見出しの下にあるこの記事を参照してください。

C#BlazorWebAssemblyアプリプロジェクトを作成する

Microsoft Visual Studio IDEで、BlazorWebAssemblyアプリを作成します。次のスクリーンショットのように、[次へ]ボタンを押して、[。NET5.0]および[ASP.NETCore]チェックボックスをオンにします。

BlazorWebAssemblyアプリ
System.Drawing Blazor

プロジェクト参照を更新する

NuGetギャラリーを参照し、プロジェクトの依存関係として追加するAspose.Drawingパッケージを構成します。

画像を描画するためのコードを追加する

Pages / Index.razorファイルの内容を次のコードスニペットに置き換えて、図面を含む画像を作成します。

@page "/"
@using System.Drawing;
@using System.Drawing.Drawing2D;
@using System.Drawing.Imaging;
@using System.IO;

<img src="@imageSrc" />

@code {
    private string imageSrc;

    public Index()
    {
        imageSrc = "data:image/png;base64, " + Convert.ToBase64String(Draw(ImageFormat.Png).ToArray());
    }

    static MemoryStream Draw(ImageFormat format)
    {
        Bitmap bitmap = new Bitmap(1000, 800, PixelFormat.Format32bppPArgb);
        Graphics graphics = Graphics.FromImage(bitmap);
        graphics.SmoothingMode = SmoothingMode.AntiAlias;

        Brush brush = new LinearGradientBrush(new Point(0, 0), new Point(1000, 800), Color.Red, Color.Blue);
        graphics.FillEllipse(brush, 100, 100, 800, 600);

        MemoryStream result = new MemoryStream();
        bitmap.Save(result, format);
        result.Seek(0, SeekOrigin.Begin);
        return result;
    }
}

ライセンスと初期化コードを追加します

これで、ライセンスファイルを埋め込みリソースとして追加し、次のライセンス初期化コードをProgram.csファイルのmainメソッドに追加できます。ただし、ライセンスをお持ちでない場合は、無料の一時ライセンスをリクエストできます。

Aspose.Drawing.License license = new Aspose.Drawing.License();
license.SetLicense("BlazorApp1.Client.Aspose.Drawing.NET.lic");

アプリケーションを実行する

Microsoft Visual Studio IDEからアプリケーションを実行すると、ブラウザに次のようなグラデーション画像が表示されます。

結論

この記事では、BlazorWebAssemblyアプリケーションでSystem.Drawing機能を使用する方法を学習しました。 APIが提供する機能の詳細については、ドキュメントスペースにアクセスしてください。また、要件や懸念事項について話し合う必要がある場合は、フォーラムからご連絡ください。

関連項目

Windows以外のプラットフォームでの.NET6でのSystem.Drawingの使用