Image Resizing from SQL Database on the fly with MVC2

Question

I have a simple MVC2 app that uploads a file from the browser to an MS SQL database as an Image blob.

Then I can return the results with something like:

        public FileContentResult ShowPhoto(int id)
        {
           TemporaryImageUpload tempImageUpload = new TemporaryImageUpload();
           tempImageUpload = _service.GetImageData(id) ?? null;
           if (tempImageUpload != null)
           {
              byte[] byteArray = tempImageUpload.TempImageData;
              return new FileContentResult (temp, "image/jpeg");
           }
           return null;
        }

But I want to return these images resized as both thumbnails and as a gallery-sized view. Is this possible to do within this Result? I've been playing around with the great imageresizer.net but it seems to want to store the images on my server which I want to avoid. Is it possible to do this on the fly..?

I need to keep the original file and don't, if possible, want to store the images as files on the server.

Thanks for any pointers!

Wow! Both answers below work brilliantly. I don't know what to do now with marking as answered as I would have been over the moon with just one of these responses :) — beebul, May 07 '12 at 15:47

score 11 · Accepted Answer · answered May 07 '12 at 15:43

ImageResizer.NET allows you to pass a stream to it for resizing, see Managed API usage

The method you'd use is:

ImageResizer.ImageBuilder.Current.Build(object source, object dest, ResizeSettings settings)

I modified your method to go about it this way, but it is untested. Hope it helps.

public FileContentResult ShowPhoto(int id)
    {
       TemporaryImageUpload tempImageUpload = new TemporaryImageUpload();
       tempImageUpload = _service.GetImageData(id) ?? null;
       if (tempImageUpload != null)
       {
          byte[] byteArray = tempImageUpload.TempImageData;
          using(var outStream = new MemoryStream()){
              using(var inStream = new MemoryStream(byteArray)){
                  var settings = new ResizeSettings("maxwidth=200&maxheight=200");
                  ImageResizer.ImageBuilder.Current.Build(inStream, outStream, settings);
                  var outBytes = outStream.ToArray();
                  return new FileContentResult (outBytes, "image/jpeg");
              }
          }
       }
       return null;
    }

I choose this as the answer, because I already had been using ImageResizer. Thanks! — beebul, May 07 '12 at 16:07
Actually, 'inStream' isn't required, ImageResizer can consume a byte[] array directly. Also, if you don't want disk caching on certain requests, you can add &cache=no instead of making a less-efficient MVC result... — Lilith River, Jul 10 '12 at 13:03
@ComputerLinguist, this method doesn't seem to use DiskCaching. Is there an example somewhere that shows a byte array being converted above, but using disk caching? — vernak2539, Dec 02 '14 at 16:29

score 4 · Answer 2 · answered May 07 '12 at 15:55

4

There was a recent Hanselminutes podcast on Image Resizing with Nathanael Jones discussing some of the pitfalls of image resizing.

Even if you do not have 30 odd minutes to listen to the full podcast, the show notes point to some interesting resizing pitfalls, as well as an image resizing library also written by Nathanael Jones.

answered May 07 '12 at 15:55

Jack Bolding

3,801
3
39
44

Thanks Jack I will definitely check that out. – beebul May 07 '12 at 16:03

score 3 · Answer 3 · answered May 07 '12 at 15:32

You could resize the image on the fly:

public void ResizeImage(Stream input, Stream output, int newWidth, int maxHeight)
{
    using (var srcImage = Image.FromStream(input))
    {
        int newHeight = srcImage.Height * newWidth / srcImage.Width;
        if (newHeight > maxHeight)
        {
            newWidth = srcImage.Width * maxHeight / srcImage.Height;
            newHeight = maxHeight;
        }

        using (var newImage = new Bitmap(newWidth, newHeight))
        using (var gr = Graphics.FromImage(newImage))
        {
            gr.SmoothingMode = SmoothingMode.AntiAlias;
            gr.InterpolationMode = InterpolationMode.HighQualityBicubic;
            gr.PixelOffsetMode = PixelOffsetMode.HighQuality;
            gr.DrawImage(srcImage, new Rectangle(0, 0, newWidth, newHeight));
            newImage.Save(output, ImageFormat.Jpeg);
        }
    }
}

and then you could have 2 controller actions (one that displays the full image size and one that displays a thumbnail):

public ActionResult Thumbnail(int id)
{
    var tempImageUpload = new TemporaryImageUpload();
    tempImageUpload = _service.GetImageData(id) ?? null;
    if (tempImageUpload == null)
    {
        return HttpNotFound();
    }

    using (var input = new MemoryStream(tempImageUpload.TempImageData))
    using (var output = new MemoryStream())
    {
        ResizeImage(input, output, 640, 1000);
        return File(output.ToArray(), "image/jpeg");
    }
}

Thanks Darin, this was useful :) David – beebul May 07 '12 at 16:07 — beebul, May 07 '12 at 16:07

Image Resizing from SQL Database on the fly with MVC2

3 Answers3