How to display images from Azure blob storage using Angular Image Editor?

2 mins read

This article provides a guide on how to retrieve and display images stored in Azure Blob Storage within an Angular Image Editor application using Syncfusion’s Image Editor component.

Prerequisites

Syncfusion Angular UI components installed in your project.
An Azure account with an active Blob Storage container.
Images uploaded to the Azure Blob Storage container.

Backend Setup

First, set up a backend service to retrieve the image from Azure Blob Storage. Here’s a sample controller action in an ASP.NET Core application:

public IActionResult GetImagefromAzure()
{
    // Connection String of Storage Account
    string connectionString = "<Your Azure Blob Storage Connection String>";

    // Initialize BlobServiceClient
    BlobServiceClient blobServiceClient = new BlobServiceClient(connectionString);

    // Container Name
    string containerName = "<Your Container Name>";

    // File Name to be loaded into Syncfusion Image Viewer
    string imageName = "img1.png";

    // Get a reference to the container
    BlobContainerClient containerClient = blobServiceClient.GetBlobContainerClient(containerName);

    // Get a reference to the blob
    BlockBlobClient blockBlobClient = containerClient.GetBlockBlobClient(imageName);

    // Download the blob's content to a MemoryStream
    MemoryStream memoryStream = new MemoryStream();
    blockBlobClient.DownloadTo(memoryStream);

    // Convert the MemoryStream to a Base64 string
    string base64String = Convert.ToBase64String(memoryStream.ToArray());

    // Return the Base64 string with the appropriate data URI scheme
    return Content("data:image/png;base64," + base64String);
}

Frontend Setup

In your Angular application, you will need to set up the Syncfusion Image Editor component and a button to trigger the image loading process.

HTML Template

Include the following HTML in your component’s template:

<!-- Button to trigger image retrieval -->
<input type="submit" value="Get Image from Azure" class="Button" id="button" />

<!-- Syncfusion Image Editor component -->
<div id="wrapperDiv" style="width:1000px; height:500px;">
    <ejs-imageeditor id="image-editor" #imageEditor></ejs-imageeditor>
</div>

<script type="text/javascript">
  $('#button').click(function () {
    $.ajax({
      // Replace with the actual URL of your server
      url: 'https://<Your Server URL>/GetImagefromAzure',
      type: "GET",
      success: function (data) {
        // Get the instance of the Syncfusion Image Editor
        var imageEditor = document.getElementById('image-editor').ej2_instances[0];
        // Open the image in the editor
        imageEditor.open(data);
      }
    });
  });
</script>

Replace <Your Server URL> with the actual URL where your backend service is hosted.

Additional References

Syncfusion Angular UI Components: https://www.syncfusion.com/angular-ui-components
Azure Blob Storage Documentation: https://docs.microsoft.com/en-us/azure/storage/blobs/
Syncfusion Image Editor Documentation: https://ej2.syncfusion.com/angular/documentation/image-editor/getting-started/

By following these steps, you can successfully integrate Azure Blob Storage with Syncfusion’s Image Editor in an Angular application to display images.

Conclusion

I hope you enjoyed learning about how to display images from Azure blob storage using Angular Image Editor.

You can refer to our Angular Image Editor page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular Image Editor example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!

ImageEditorAzureStorage.zip

Did you find this information helpful?

Yes

Comments (0)