Send Image From Controller To View In MVC3

Question

I am using asp.net mvc3. I am making a bitmap using text by system.drawing. I want
to send that image from my controller to my view in VIEWDATA, but in my view I cannot parse VIEWDATA properly.

This is the controller code:

 public ActionResult About( string agha)
        {
            agha = "asgdjhagsdjgajdga";
             Color BackColor = Color.White;
            String FontName = "Times New Roman";
            int FontSize = 25;
            int Height = 50;
            int Width = 700;

            Bitmap bitmap = new Bitmap(Width, Height);
            Graphics graphics = Graphics.FromImage(bitmap);
            Color color = Color.Gray; ;
            Font font = new Font(FontName, FontSize);         

            SolidBrush BrushBackColor = new SolidBrush(BackColor);
            Pen BorderPen = new Pen(color);

            Rectangle displayRectangle = new Rectangle(new Point(0, 0), new Size(Width - 1, Height - 1));

            graphics.FillRectangle(BrushBackColor, displayRectangle);
            graphics.DrawRectangle(BorderPen, displayRectangle);               

            graphics.DrawString(agha,font,Brushes.Red, 0, 0);
            ViewData["picture"] = bitmap;            

            return View( );
        }

The view calling the viewdata looks like this

 <img src="@ViewData["picture"]." />

Answer 1

I'd recommend you writing a custom action result to avoid polluting your controller action with completely useless and boring GDI+ infrastructure code:

public class ImageResult : ActionResult
{
    private readonly string _agha;
    public ImageResult(string agha)
    {
        _agha = agha;
    }

    public override void ExecuteResult(ControllerContext context)
    {
        Color BackColor = Color.White;
        String FontName = "Times New Roman";
        int FontSize = 25;
        int Height = 50;
        int Width = 700;

        using (Bitmap bitmap = new Bitmap(Width, Height))
        using (Graphics graphics = Graphics.FromImage(bitmap))
        {
            Color color = Color.Gray;
            Font font = new Font(FontName, FontSize);

            SolidBrush BrushBackColor = new SolidBrush(BackColor);
            Pen BorderPen = new Pen(color);

            Rectangle displayRectangle = new Rectangle(new Point(0, 0), new Size(Width - 1, Height - 1));

            graphics.FillRectangle(BrushBackColor, displayRectangle);
            graphics.DrawRectangle(BorderPen, displayRectangle);

            graphics.DrawString(_agha, font, Brushes.Red, 0, 0);

            context.HttpContext.Response.ContentType = "image/jpg";
            bitmap.Save(context.HttpContext.Response.OutputStream, ImageFormat.Jpeg);
        }
    }
}

and then simply define a controller action that will return this custom action result:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult Image(string agha)
    {
        return new ImageResult(agha);
    }
}

and from within some view (~/Views/Home/Index.cshtml in my example) you could reference the action that will dynamically generate the image for you:

<img src="@Url.Action("Image", new { agha = "foo bar" })" alt="" />

Another possibility if you don't want to create an additional action to build the image is to use the Data URI scheme which basically allows you to embed the image as Base64 data directly into the HTML. One caveat with this is that not all browsers support it and ni addition to that it makes your HTML pages much larger.