ASP.NET MVC 5でサーバーサイドで動的に生成した画像を返す

ASP.NET MVC 5でサーバーサイドで生成した画像を表示したくなることありませんか？サーバー側で持っているデータを元に、人気ランキングバナーやロウソク図を生成するのに使えそうですね。

例えば、htmlで以下のように書きます。

<img src="http://example.jp/Graphics/Index/" />

GraphicsコントローラーのIndexアクションが実行されます。そのため、GraphicsControllerで画像を生成してファイルのストリームを返します。これだけ。

using System.Drawing;
using System.IO;
using System.Web.Mvc;

namespace Test1.Controllers
{
    public class GraphicsController : Controller
    {
        // GET: Graphics
        public ActionResult Index(string id)
        {
            if (string.IsNullOrWhiteSpace(id))
            {
                id = "何も入力されなかったですよ";
            }

            // 画像を生成する
            var ms = new MemoryStream();
            using (var image = new Bitmap(200, 200))
            {
                using (var g = Graphics.FromImage(image))
                {
                    // 画像の背景を描画する
                    var fillBrush = new SolidBrush(Color.Magenta);
                    g.FillRectangle(fillBrush, new Rectangle(0, 0, 200, 200));
                    fillBrush.Dispose();

                    // 文字列を描画する
                    var font = new Font("MS UI Gothic", 10);
                    var fontBrush = new SolidBrush(Color.White);
                    g.DrawString(id, font, fontBrush, new PointF(0,0));
                    fontBrush.Dispose();
                    font.Dispose();
                }

                // 描画したビットマップをPNGとしてストリームへ保存する
                image.Save(ms, System.Drawing.Imaging.ImageFormat.Png);
                ms.Position = 0;
            }
            
            // サーバーサイドで実装した画像を返す
            return new FileStreamResult(ms, "image/png");
        }
    }
}