UPDATE: Dynamically Resizing Your ASP.NET MVC Images

Compare this to our previous version and it's definitely easier on the eyes.

Image Manipulation Extension Methods

How's that for a mouthful?

Basically, we need something to constrain either the width or height when resizing the image.

If we want to constrain the image to a certain height or width, we need a way to shrink it to the appropriate size without the image looking squished.

public static class ImageExtensions
    public static Image BestFit(this Image image, int height, int width)
        return image.Height > image.Width
            ? image.ConstrainProportions(height, Dimensions.Height)
            : image.ConstrainProportions(width, Dimensions.Width);

    public static Image ConstrainProportions(this Image imgPhoto, int size, Dimensions dimension)
        var sourceWidth = imgPhoto.Width;
        var sourceHeight = imgPhoto.Height;
        var sourceX = 0;
        var sourceY = 0;
        var destX = 0;
        var destY = 0;
        float nPercent;

        switch (dimension)
            case Dimensions.Width:
                nPercent = (float) size / (float) sourceWidth;
                nPercent = (float) size / (float) sourceHeight;

        int destWidth = (int) (sourceWidth * nPercent);
        int destHeight = (int) (sourceHeight * nPercent);

        Bitmap bmPhoto = new Bitmap(destWidth, destHeight, PixelFormat.Format24bppRgb);
        bmPhoto.SetResolution(imgPhoto.HorizontalResolution, imgPhoto.VerticalResolution);

        Graphics grPhoto = Graphics.FromImage(bmPhoto);
        grPhoto.InterpolationMode = InterpolationMode.HighQualityBicubic;

                new Rectangle(destX, destY, destWidth, destHeight),
                new Rectangle(sourceX, sourceY, sourceWidth, sourceHeight),

        return bmPhoto;

It doesn't matter if we use width or height, we still need a percentage to shrink the image down to our specifications.

Once we have our dimensions, we can copy the image into a new image for the browser.

The Final Touch

The only thing remaining is the controller.

Since we don't want to change our HTML, we'll keep the Thumbnail signature the same and update the implementation details with our new ImageResult.

[ETag, OutputCache(Duration = 3600, VaryByParam = "filename")]
public ActionResult Thumbnail(string filename)
    var partialName = $"~{new Uri(filename).PathAndQuery}";

    using (Image image = Image.FromFile(Server.MapPath(partialName)))
        return new ImageResult(image.BestFit(291, 285));

With this change in place, the Image class seems to be a better alternative than the WebImage.

In addition to fixing this issue, I now have the start of an image manipulation extension library.


First, thanks go out to my readers for letting me know about this issue. Letting me know about issues like this makes it a win-win for everyone. I (try to) fix the issue and let my audience know about it so they can benefit from the solution as well.

Second, after about a week in "production," this technique seems to fix my issue with blank images.

Finally, this brings me to a couple of questions for my readers:

  • How could you make a unit test for this scenario?
  • Would you use the Parallel library for testing the Controller action?

I understand this would be considered more of an integration test, but, if done properly, it would tell me whether the images were generated and returned correctly.


Do you manipulate images on the fly? Is this a similar approach? Post your comments below and let's discuss.

Source : https://dzone.com/articles/update-dynamically-resizing-your-asp-net-mvc-image

UPDATE: Dynamically Resizing Your ASP.NET MVC Images