Wednesday 25 December 2013

Render Images in MVC3 Razor from Database



  1. In this article we will see how to render the image from image bytes stored in database.
  2. We often store images in database as bytes. We use varbinary data type to store image bytes.
  3. We have explained two ways by which we can render the images.

Way 1:

In our first way we are passing the image bytes with View Model. In order to render the image we use Image tag.

ViewModel :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace RenderImage.ViewModel
{
    public class ImageViewModel
    {
        public byte[] ImageBytes { get; set; }
    }
}

We have a simple ViewModel. The ImageViewModel class has ImageBytes as property of type byte array. This property is set with bytes from database and the ViewModel object is passed to the view.

Controller :

 
public ActionResult RenderImageBytes()
        {
            ImageViewModel model = new ImageViewModel();
            RenderImage.Service.RenderImage service = new Service.RenderImage();
            model.ImageBytes = service.GetImageBytesByImageId(1);
            return View(model);
        }

The above action method created an object of ImageViewModel class. We are calling a service class method which interacts with database and fetces the image bytes. We have hard coded the ImageId as 1. The object containing  image bytes is sent to the view.

Service class:

 
public byte[] GetImageBytesByImageId(int ImageId)
        {
            using (RenderImageEntities dataContext = new RenderImageEntities())
            {
                return dataContext.Image.Where(query => query.ImageId == ImageId).SingleOrDefault().ImageBytes;
            }
        }

The service class metod returns the byte array as per the ImageId passed.

View :

 
    @model RenderImage.ViewModel.ImageViewModel
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <title>RenderImage</title>
</head>
<body>
<h1>Render Image</h1>
    <div>
    <img src="data:image/jpg;base64,@(Html.Raw(Convert.ToBase64String(Model.ImageBytes)))" alt="Picture"/>
    </div>
</body>
</html>

The above view shows how to render the image using image bytes. The above image tag renders the image saved with jpg image format. In order to render image saved as png replace jpg with png.


Way 2:

 In this way we call a FileContentResult method which returns a byte array as FileContentResult which renders an image on UI.

Controller :

 

public FileContentResult GetImage(int imageId)
        {
            RenderImage.Service.RenderImage service = new Service.RenderImage();
            byte[] byteArray = service.GetImageBytesByImageId(imageId);
            if (byteArray != null)
            {
                return new FileContentResult(byteArray, "image/jpeg");
            }
            else
            {
                return null;
            }
        }

The above method gets the byte array from database based on imageId and returns a FileContentResult with byte array and format of image to render.

View :

 
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <title>RenderImage</title>
</head>
<body>
<h1>Render Image</h1>
    <div>
    <img src='@Url.Action("GetImage", "Image", new { imageId = 1 })' alt="Image" />
    </div>
</body>
</html>

We are calling an Action from the view which returns a FileContentResult which is source for image tag. The image rendered using this way takes some time to load as compare to way 1 as the request to DB for getting bytes goes after the image tag is rendered.

So these are the two ways explained to render the image from byte array in MVC3 Razor.

No comments:

Post a Comment