Developers can now implement a cost-effective image manipulation service using the fast and powerful GrapeCity Imaging APIs. This functional service can be used as part of a workflow to process uploaded images from users to create thumbnails, compress size, extract meta-data and watermark copyright messages.
Azure Functions are easy to build and easy to deploy with minimal set up and maintenance. This makes them the ideal architecture for this type of service. This method is serverless and lets developers run a piece of logic or part of application on the fly, which can be triggered through an event. An example of this is a user clicking on an element in a web application or HTTP requests. This makes it easy for Developers to work more on the app-specific code rather than spending time on handling server logistics.
It also helps to scale code and is a cost efficient way to implement microservices - users only pay for executed functionality, while nothing is charged for inactive resources. Some popular FaaS options include AWS Lambda, Google Cloud Functions, Microsoft Azure Functions, and open-source options from Oracle and IBM.
This article walks you through the easy steps needed to create an Azure Function in Visual Studio that uses GcImaging to make a thumbnail from an image, test the app locally, and deploy and test it on Azure.
Try the Demo
1. Create the barebones function app
Follow the steps on creating an Azure Function described in this document.
This will guide you through the steps needed to create an Azure Function with an HTTP trigger in Visual Studio, test it locally, upload it to Azure, and test the function running in Azure.
IMPORTANT:
Prior to publishing, in 'Build | Publish', click on 'Manage Application Settings...', and change the value of FUNCTIONS_EXTENSION_VERSION from the (default at the time of writing) '~1' to '~2' (v2 functions allow to use .NET Standard packages). Re-publish the app if you have already published it before this change.
2. Install GcImaging NuGet package into your application
In Visual Studio, go to Dependencies, right-click and select 'Manage NuGet Packages...', search for 'GcImaging' and install the GrapeCity.Documents.Imaging package.
3. Change the automatically created 'Function1'
In your Visual Studio project, go to Function1.cs, and change the automatically created method to the following code that creates a jpeg thumbnail (max side 128 pixels) from the passed larger image:
using System;
using System.IO;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Azure.WebJobs;
using Microsoft.Azure.WebJobs.Extensions.Http;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.Logging;
using Newtonsoft.Json;
using GrapeCity.Documents.Imaging;
namespace FunctionApp1
{
public static class Function1
{
[FunctionName("Function1")]
public static async Task<IActionResult> Run(
[HttpTrigger(AuthorizationLevel.Anonymous, "get", "post", Route = null)] HttpRequest req,
ILogger log)
{
GcBitmap.SetLicenseKey(<<your license key>>);
try
{
var file = req.Form.Files[0];
using (var ms = new MemoryStream())
{
await file.CopyToAsync(ms);
ms.Position = 0;
using (var image = new GcBitmap(ms))
{
int w, h;
if (image.Width >= image.Height)
{
w = 128;
h = (int)Math.Round(128 * image.Height / image.Width);
}
else
{
h = 128;
w = (int)Math.Round(128 * image.Width / image.Height);
}
var msRet = new MemoryStream();
using (var thumbnail = image.Resize(w, h, InterpolationMode.Downscale))
{
thumbnail.SaveAsJpeg(msRet);
msRet.Position = 0;
var result = new FileStreamResult(msRet, "image/jpeg");
return result;
}
}
}
}
catch (Exception ex)
{
return new BadRequestObjectResult($"Error:\n{ex.Message}");
}
}
}
}
IMPORTANT! In the code above, do not forget to pass a valid license key to the GcImaging.SetLicenseKey method. If you do not specify a license key, the function will work a limited number of times, then stop.
4. Re-publish your app to Azure
Go to Build | Publish, and publish the modified app.
5. Create a web page to test your app
In your favorite text editor, create an index.html file, and copy and paste into it the following HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>GcImaging Function Demo</title>
</head>
<body>
<p>Create image thumbnail:</p>
<form id="thumbnail" enctype="multipart/form-data" method="post" action="https://<<your site URL here>>/api/Function1">
Select an image file to upload: <input id="fileupload" name="myfile" type="file" accept="image/png, image/jpeg, image/jpg, image/tiff, image/tif, image/bmp" />
<input type="submit" id="submit" value="submit" />
</form>
</body>
</html>
Replace the '<<your site URL here>>' part in the form's action with the value copied from the 'Site URL' field in the Visual Studio's 'Build | Publish' screen. Save index.html to your hard drive.
6. Test the app
Open the index.html page created in the previous step in a web browser. Select an image file from your hard drive, and submit the form. A smaller image will be returned and shown in the browser.
That's it. Enjoy!
Did you find this tutorial interesting? If you have any questions, please leave a comment below.
