Cropping an image using ImageResizer trigger

In the recent times, with the evolution of smart phones with high-end cameras, it's easy to capture a high-quality picture of huge sizes. It's good to have good quality pictures to refresh our memories. However, as an application developer or administrator, it would be a pain to manage the storage when your website is popular and you expect most of the users to get registered with a high-quality profile picture. So, it makes sense to use some libraries that could reduce the size of the high-quality images and crop them without losing the aspect ratio so that the quality of the image doesn't get reduced.

In this recipe, we will learn how to implement the functionality of cropping the image and reducing the size without losing the quality using one of the built-in Azure Function templates named ImageResizer .

Getting ready

In this recipe, you will learn how to use a library named ImageResizer. We will be using the library for resizing the image with the required dimensions. For the sake of simplicity, we will crop the image to the following sizes:

• Medium with 200*200 pixels
• Small with 100*100 pixels

How to do it...

1. Create a new Azure Function by choosing the Samples in theScenario drop-down as shown in the following screenshot:

2. Select the ImageResizer-CSharp template as shown in the preceding screenshot.
3. Once you have selected the template, the portal prompts you to choose the following parameters:
   • Name your Function: Provide a meaningful name. For this example, I have provided CropProfilePictures.
   • Azure Blob Storage trigger (image):
     • Path: Provide the path of the container (in our case userprofileimagecontainer) which contains all the blobs that are created by the Queue trigger. CreateProfilePictures in the previous recipe
     • Storage account connection: Select the connection string of the storage account where the container and Blobs are stored

4. • Azure Blob Storage output (imageMedium):
     • Path: Please provide the name of the container where the resized images of size medium 200*200 are to be stored. In this case, userprofileimagecontainer-md.
     • Storage account connection: Select the connection string of the storage account where the Blobs are stored.
   • Azure Blob Storage output (imageSmall):
     • Path: Please provide the name of the container where the resized images of size small 100*100 are to be stored. In this case, userprofileimagecontainer-sm.
     • Storage account connection: Select the connection string of the storage account where the Blobs are stored.

5. Review all the details and click on Create as shown in the following screenshot:

6. Fortunately, the ImageResizer Azure Function template provides most of the necessary code for our requirement of resizing the image. I just made a few minor tweaks. Replace the default code with the following code and the code should be self-explanatory:

        using ImageResizer;

        public static void Run(
          Stream image, Stream imageSmall, Stream imageMedium) 
          {
            var imageBuilder = ImageResizer.ImageBuilder.Current;
            var size = imageDimensionsTable[ImageSize.Small];
            imageBuilder.Build(image, imageSmall, new ResizeSettings
             (size.Item1, size.Item2, FitMode.Max, null), false);
            image.Position = 0;
            size = imageDimensionsTable[ImageSize.Medium];
            imageBuilder.Build(image, imageMedium, new ResizeSettings
             (size.Item1, size.Item2, FitMode.Max, null), false);
          }

        public enum ImageSize
        {
            Small, Medium
        }

        private static Dictionary<ImageSize, Tuple<int, int>> 
         imageDimensionsTable = new Dictionary<ImageSize, Tuple<int,         
         int>>()
        {
            { ImageSize.Small, Tuple.Create(100, 100) },
            { ImageSize.Medium, Tuple.Create(200, 200) }
        };

7. Let's run a test on the RegisterUser function by submitting a sample request with firstname, lastname, and a ProfilePicUrl. I have used the same inputs that we have used in our previous recipes.

8. In the Azure Storage Explorer, I can see two new Blob containers userprofileimagecontainer-md and userprofileimagecontainer-sm as shown in the following screenshot:

9. I can even view the corresponding cropped versions in each of those containers. Following are the three versions of the image that we have used as input:

How it works...

We have created a new function using one of the samples named ImageResizer that the Azure Function template provides.

The ImageResizer template takes input from userprofileimagecontainer Blob container where the original Blobs reside. Whenever a new Blob is created in the userprofileimagecontainer Blob, the function will create two resized versions in each of the userprofileimagecontainer-md and userprofileimagecontainer-sm containers automatically.

Following is a simple diagram that shows how the execution of the functions is triggered like a chain:

See also

• • The Building a backend Web API using HTTP triggers recipe

  • The Persisting employee details using Azure Storage table output bindings recipe 

  • The Saving profile picture path to Azure Storage Queues using Queue output bindings recipe 

  • The Storing the image in Azure Blob storage recipe