C# Graphics and Response classes to draw Images

We will learn how ASP.NET MVC application can generate JPG image to the client requesting for JPG image. It means that the Response content type will be image/jpeg. We buffer the response so that image is sent when the image processing is done. 

Let's suppose that we want to draw some letters on the image. For this we use Font class. We use Random class to generate some random numbers. We use Bitmap class to create a bitmap image and use Graphics class to pass the bitmap object to the Graphics. The Graphics is a static class which has FromImage method to generate graphic object. This graphic object is used to draw rectangle or other shapes or to draw string or fill color etc. Finally, we save the bitmap to the response stream and convert it to JPEG format. Response object has flush method to output the buffer to the client.

using System.Drawing;
using System.Drawing.Imaging;
using System.Web.Mvc;

namespace MvcDrawImage.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            Response.ContentType = "image/jpeg";
            Response.Clear();
            Response.BufferOutput = true;
            // bitmap object of 400 by 400 of 32 bits per pixel format
            Bitmap bmp = new Bitmap(width: 400, height: 400, System.Drawing.Imaging.PixelFormat.Format32bppArgb);
            Graphics g = Graphics.FromImage(bmp);
            g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.Default;
            g.Clear(Color.Green);// clear drawing surface and fill it with green color
            g.DrawRectangle(Pens.White, 1, 1, 50, 50); // draw a rectangle of white border
            g.FillRectangle(new SolidBrush(Color.Red), 100, 100, 200, 200); // draw and fill a rectangle with red color
            // save the image as stream of jpeg format
            bmp.Save(Response.OutputStream, ImageFormat.Jpeg);
            //clean the memory
            g.Dispose();
            bmp.Dispose();
            // flush the stream to the client
            Response.Flush();
            return View();
        }

        public ActionResult About()
        {
            ViewBag.Message = "Your application description page.";

            return View();
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }
    }
}

Another Code

using System;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Drawing.Imaging;
using System.Web.Mvc;

namespace WebAppHttp.Controllers
{
    public class ReqController : Controller
    {
        public ActionResult Index()
        {
            // Set the page's content type to JPEG files
            // and clears all content output from the buffer stream.
            Response.ContentType = "image/jpeg";
            Response.Clear();

            // Buffer response so that page is sent
            // after processing is complete.
            Response.BufferOutput = true;

            // Create a font style.
            Font rectangleFont = new Font(
                "Arial", 10, FontStyle.Bold);

            // Create integer variables.
            int height = 100;
            int width = 200;

            // Create a random number generator and create
            // variable values based on it.
            Random r = new Random();
            int x = r.Next(75);
            int a = r.Next(155);
            int x1 = r.Next(100);

            // Create a bitmap and use it to create a Graphics object.
            Bitmap bmp = new Bitmap(
                width, height, PixelFormat.Format24bppRgb);
            Graphics g = Graphics.FromImage(bmp);

            g.SmoothingMode = SmoothingMode.AntiAlias;
            g.Clear(Color.LightGray);

            // Use the Graphics object to draw three rectangles.
            g.DrawRectangle(Pens.White, 1, 1, width - 3, height - 3);
            g.DrawRectangle(Pens.Aquamarine, 2, 2, width - 3, height - 3);
            g.DrawRectangle(Pens.Black, 0, 0, width, height);

            // Use the Graphics object to write a string on the rectangles.
            g.DrawString(
                "Sample Example for Image", rectangleFont,
                SystemBrushes.WindowText, new PointF(10, 40));

            // Apply color to two of the rectangles.
            g.FillRectangle(
                new SolidBrush(
                    Color.FromArgb(a, 255, 128, 255)),
                x, 20, 100, 50);

            g.FillRectangle(
                new LinearGradientBrush(
                    new Point(x, 10),
                    new Point(x1 + 75, 50 + 30),
                    Color.FromArgb(128, 0, 0, 128),
                    Color.FromArgb(255, 255, 255, 240)),
                x1, 50, 75, 30);

            // Save the bitmap to the response stream and convert it to JPEG format.
            bmp.Save(Response.OutputStream, ImageFormat.Jpeg);

            // Release memory used by the Graphics object and the bitmap.
            
            g.Dispose();
            bmp.Dispose();

            // Send the output to the client.
            Response.Flush();
            return View();
        }
    }
}

---

Updated on 6 July 2023