This article will explore the demonstration of creating alpha matte images, when an image is uploaded to Optimizely CMS. This will be achieved using the foreground matting feature provided by the Azure AI Vision service.
To explain what an alpha matte image is, it’s an image that indicates how transparent the foreground object is. The alpha matte feature helps separate the foreground object from the background for additional editing.
This is how it works: First, you upload an image to Optimizely CMS. Then, the Azure AI Vision service uses the uploaded image to create an alpha matte version. After that, both the original image and the alpha matte version are uploaded to the CMS. This allows users to use both versions of the image. You can see the specific image used to create the alpha matte image above.
Additionally, the following screenshot displays the code used to create an alpha matte image, using the Azure AI Vision API.
The first step of this code snippet is to use the Azure AI Vision service to analyse the image. The service will produce a gray-scale alpha matte image that shows how transparent the detected foreground object is. Below is the resulting image.
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. Below is a screenshot of both image variations being available in the CMS in the Media folder.
Anil Patel's Blog 