How to upload and resize an image in ASP.NET MVC using ImageResizer

Recently I was developing an API and a CMS for a mobile application and I was asked to store different versions of an image and then display them depending on the device’s screen density.

Doing some googling I ran into this cool library called ImageResizer.

It is a library that offers a set of photography tools such as red-eye correction, image cropping, white balance correction and image resizing.

In this post I will show you how to upload an image and store different size versions of it using ASP.NET MVC and the Managed API of ImageResizer.

First, we are going to create a new ASP.NET Web Application and install the ImageResizer library via NuGet package manager.

Captura de pantalla 2014-07-23 11.50.16

Figure 1. Download ImageResizer library through NuGet package manager.

When the download is completed, it’s time to add some HTML to our view to create a file upload input and a submit button.

@using (Html.BeginForm("Upload", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
 {
     <div class="form-group">;
         <label for="file" class="control-label">Select an Image</label>;
         <input type="file" name="file" id="file" class="form-control" />
         <br/>
         <input type="submit" value="Upload" class="btn btn-default" />
     </div>;
 }

Next, add a new Action to the controller that receives an HttpPostedFileBase object as a parameter. This action will be responsible for handling the resizing and storage of the image.

public ActionResult Upload(HttpPostedFileBase file)
{
	if (file != null)
	{
		//Declare a new dictionary to store the parameters for the image versions.
		var versions = new Dictionary<string, string>();

		var path = Server.MapPath("~/Images/");

		//Define the versions to generate
		versions.Add("_small", "maxwidth=600&maxheight=600&format=jpg";);
		versions.Add("_medium", "maxwidth=900&maxheight=900&format=jpg");
		versions.Add("_large", "maxwidth=1200&maxheight=1200&format=jpg");

		//Generate each version
		foreach (var suffix in versions.Keys)
		{
			file.InputStream.Seek(0, SeekOrigin.Begin);

			//Let the image builder add the correct extension based on the output file type
			ImageBuilder.Current.Build(
				new ImageJob(
					file.InputStream,
					path + file.FileName + suffix,
					new Instructions(versions[suffix]),
					false,
					true));
		}
	}

	return RedirectToAction("Index");
}

In order to resize the images, I used the Build()method of the ImageBuilder class. This method receives an ImageJob object that is initialized with five parameters:

  • A Stream object that contains our image file.
  • The destination path.
  • An Instructions object that contains the image processing parameters.
  • A boolean indicating if the source is disposed after being used.
  • A boolean indicating that the appropriate extension will be added to the destination path.

That’s it, now when you upload an image, you will notice that three versions are saved to the destination path that we specified.

If you need more information about the ImageResizer library you can check the documentation here.

I made this example based on the information presented at this page.

Advertisements