Anil Patel's Blog

This article will explore the demonstration of background removal of images, when an image is uploaded to Optimizely CMS. This will be achieved using the background removal feature provided by the Azure AI Vision service.

This is done by uploading an image to Optimizely CMS. The Azure AI Vision service will utilise the uploaded image, to generate a version with the background removed. Subsequently, the original image and the background removed version are uploaded to the CMS, meaning both variations of the image can be used. The specific image used for the background removal is shown above.

Additionally, the following screenshot displays the code used to remove the background from the image, using the Azure AI Vision API.

The first step is to use the Azure AI Vision service to analyse the image and remove the background. Below is the resulting image with the background removed

The next stage of this process is to make a new ImageFile to store the image data. The Blob Factory service makes a new blob for the image and writes the content to it. The blob is connected to the image data using the BinaryData property, in the image data class. After that, the image data is saved using the IContentRepository.Save method.

Once the images have been uploaded into the CMS, they are displayed in the Media Panel alongside other uploaded images. For reference, the name of the image with the background removed is “BackgroundRemoval.” Below is a screenshot of both image variations being available in the CMS