Blazor上でアップした画像をグレースケールに変換する

自らの忘備録として文字に起こします。

ソースコードのサンプルをGitHub上で公開しています。

前提

• Blazorサーバーサイドアプリケーション
• BlazorInputFile(NuGet)を利用したファイルアップロードを実装していること
  • この方の記事がとても素晴らしいです。
    • Blazor アプリケーションでファイルをアップロードする – BlazorInputFileを利用
  • 僕のスライドも参考程度にはなると思います。
    • Blazorをはじめよう!!-Get started with Blazor!(後半部)

つくるもの

 

作り方

System.Drawing.CommonをNuGetする

[プロジェクト(P)]->[NuGetパッケージの管理(N)…]から以下のライブラリをNuGetします。

System.Drawing.Common(Provides access to GDI+ graphics functionality.)

導入完了後 System.Drawing 名前空間を使用することができるようになります。

インターフェイスの実装&inject

インターフェイスを自作しinjectすることによって IWebHostEnvironment を取得することができるようになります。
グレースケールに変換するには変換元のファイルパスが必要なので、 IWebHostEnvironment を利用することが必須になります。

Blazorをはじめよう!!-Get started with Blazor!の43p にも記述しましたが、IWebHostEnvironment からwwwrootまでの絶対パスを取得したい場合は IWebHostEnvironment.WebRootPathと取ります。
また、アプリケーションのコンテンツファイルを含むディレクトリへの絶対パスは　IWebHostEnvironment.ContentRootPathで取ることができます。どちらもstring型で取れます。

グレースケールへの変換を実装

画像ファイルのグレースケールへの変換はDOBONさんのサイトが一番わかりやすいと思います。

画像をグレースケールに変換して表示する – DOBON.NET

こんな感じで実装してやります

public bool GrayConvert(string path) は 与えられたpathの画像ファイルをグレースケールに変換し、成功したときにtrueを返すメソッドです。

与えられたファイルパスのファイルが画像でないときの処理などは面倒なので実装せず、全てtry-catchで対応しています。お手軽です。説明雑ですすみません。

まとめ

まとめるとSystem.Drawing.CommonをNuGetしてinjectやinterface周りを整備し、グレースケール変換器を実装する感じです。意外と単純ですね。

「もっとしっかり知りたいよ！」という方はGitHub上でサンプルを公開しておりますので、そちらをご覧下さい。

https://github.com/Atria64/Samples/tree/master/GrayConverter