Displaying an Image from Azure Storage before downloading - C#

Question

I'm writing a program that will allow the user to download selected images from Azure Blob Storage.

I have it working, however, currently, the images are downloaded to a file and then this file path is used to display the images. I want the images to be displayed and then allow the user to select which images can be downloaded.

Below is my code for downloading the images.

for (int i = 1; i<=dira.ListBlobs().Count(); i++)
{
     try
     {
          CloudBlob blob = dira.GetBlobReference(i + ".png");
          blob.DownloadToFile(localFilePath + "/" + i.ToString() + ".png", FileMode.Create);
          // MessageBox.Show(i.ToString());
      }
      catch (StorageException ex)
      {
      }
}

Then my code for displaying the downloaded image is here:

pictureBox1.BackgroundImage= Image.FromFile(filePath + ".png");

How would I display the images before they have been downloaded?

You may need to upload two version of your images, a full resolution version and a thumbnail version and then use the thumbnail version to display the images to your users before downloading the full one. — Isma, Jul 02 '18 at 09:32
You can't display image without downloading image (or some thumb of image) — vasily.sib, Jul 02 '18 at 09:33
@Haytam not from what I can see. is there a way without having to download them to a file though? So download them to memory. Display them and then if the images are wanted them download them to file? — benjiiiii, Jul 02 '18 at 09:40
Well if you had the url of the image then you could using `PictureBox.Location` which will download the image but in memory. — Haytam, Jul 02 '18 at 09:45
@Haytam I've got the URL so can set it that way now. However, the image is to large. Normally I would set the BackgroundImageLayout to Zoom. How can I still set this property when using a URL? — benjiiiii, Jul 02 '18 at 09:53
Well I guess you can just normally set it? what's the problem — Haytam, Jul 02 '18 at 13:15
HI Haytam, I didn't realise I could set it programatically as it wasn't on the designer — benjiiiii, Jul 02 '18 at 15:04

score 2 · Accepted Answer · answered Jul 03 '18 at 09:02

As you said above, we can download them to memory.

Here is simple code for your reference:

 CloudBlob blob = dira.GetBlobReference(i + ".png");
 MemoryStream memoryStream = new MemoryStream();
 blob.DownloadToStream(memoryStream);
 pictureBox1.BackgroundImage = System.Drawing.Image.FromStream(memoryStream);

score 1 · Answer 2 · answered Jul 03 '18 at 12:56

If you want to really save some network traffic (aka time to download) between PC and Blob storage all you have to do is create thumbnail in Azure.

I found a very nice and complete example how to do that. Mechanism is pretty neat and 'cloudy'

Please bear in mind, that above could raise your Azure bill. As in other cases in this too you need to consider what are your priorities:

I need to be super quick and save network for my users -> create thumbnails in Azure
I want to save costs on my side and performance is not a concern -> download full sized image and create thumbnail on host

score 0 · Answer 3 · answered Jul 03 '18 at 08:52

You can not show images without downloading it

But instead,

You should create a thumbnail image with your actual image so when you show the list to a user you can download thumbnails from the server and then actual images on user selection

you can create thumbnail using below code

    public static System.Drawing.Bitmap ResizeImage(System.Drawing.Image image, int width, int height) 
    { 
        //a holder for the result 
        Bitmap result = new Bitmap(width, height); 

        //use a graphics object to draw the resized image into the bitmap 
        using (Graphics graphics = Graphics.FromImage(result)) 
        { 
            //set the resize quality modes to high quality 
            graphics.CompositingQuality = System.Drawing.Drawing2D.CompositingQuality.HighQuality; 
            graphics.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic; 
            graphics.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality; 
            //draw the image into the target bitmap 
            graphics.DrawImage(image, 0, 0, result.Width, result.Height); 
        } 

        //return the resulting bitmap 
        return result; 
    }

Ref:- C# Creating thumbnail

Displaying an Image from Azure Storage before downloading - C#

3 Answers3