MVC3/Razor thumbnail/resize image ideas?

Question

Is there an easy and dynamic way to create thumbnails and resize images in MVC3/Razor? A helper, libary, anything?

It would be nice, if I somehow could manage the size of the images from the controller. Or even in razorview. Example: In the index view I want the images to be a certain size, but in the details view i want them to be full size.

I know this question is vague, but I really couldnt find anything on google/stackoverflow other than old mvc1 thingos.

How do you guys normally deal with this?

Answer 1

Is there an easy and dynamic way to create thumbnails and resize images in MVC3/Razor? A helper, libary, anything?

You could use the built-in System.Drawing assembly and the Image class to achieve this. You may write a controller action which would be passed as arguments the image name and the desired new size and this controller action would perform the resize and return the new image.

For example:

public ActionResult Thumbnail(int width, int height)
{
    // TODO: the filename could be passed as argument of course
    var imageFile = Path.Combine(Server.MapPath("~/app_data"), "test.png");
    using (var srcImage = Image.FromFile(imageFile))
    using (var newImage = new Bitmap(width, height))
    using (var graphics = Graphics.FromImage(newImage))
    using (var stream = new MemoryStream())
    {
        graphics.SmoothingMode = SmoothingMode.AntiAlias;
        graphics.InterpolationMode = InterpolationMode.HighQualityBicubic;
        graphics.PixelOffsetMode = PixelOffsetMode.HighQuality;
        graphics.DrawImage(srcImage, new Rectangle(0, 0, width, height));
        newImage.Save(stream, ImageFormat.Png);
        return File(stream.ToArray(), "image/png");
    }
}

Now go ahead and include this action in your view:

<img src="@Url.Action("Thumbnail", "SomeController", new { width = 100, height = 50 })" alt="thumb" />

Answer 2

Using WebImage class that comes in System.Web.Helpers.WebImage you can achieve this.

You can use this great kid to output resized images on the fly.

Sample code:

public void GetPhotoThumbnail(int realtyId, int width, int height)
{
    // Loading photos’ info from database for specific Realty...
    var photos = DocumentSession.Query<File>().Where(f => f.RealtyId == realtyId);

    if (photos.Any())
    {
        var photo = photos.First();

        new WebImage(photo.Path)
            .Resize(width, height, false, true) // Resizing the image to 100x100 px on the fly...
            .Crop(1, 1) // Cropping it to remove 1px border at top and left sides (bug in WebImage)
            .Write();
    }

    // Loading a default photo for realties that don't have a Photo
        new WebImage(HostingEnvironment.MapPath(@"~/Content/images/no-photo100x100.png")).Write();
}

In a view you'd have something like this:

<img src="@Url.Action("GetPhotoThumbnail",
     new { realtyId = item.Id, width = 100, height = 100 })" />

More about it here: Resize image on the fly with ASP.NET MVC

---

I just found this nice tutorial about WebImage at the ASP.NET site:

Working with Images in an ASP.NET Web Pages (Razor) Site.

Answer 3

Also take a look at my Simple.ImageResizer.MvcExtensions nuget package.

Demo site here: http://imageresizer.apphb.com/

Adds a ImageResult class that you can use in your controller action that takes a height and width input making it pretty easy to add image resizing to your mvc site. Would love to hear what you think