Solve Transparent/Black background BMP image file generate via C# code

Question

I create to design membership card with data(memebership ID, member photo, Firstname,lastnema, expire dateand level) via using CanvasDevice to draw all text with position declaration. after i generate to save (BMP) image to local storage, the stored image will like fully black background. I am not set any background and set transparent color but image shows like that.. i need a BMP image, sample code is below

int dpi = 96; // DPI (dots per inch)

        int cardWidth = 648;

        int cardHeight = 1016;

        CanvasDevice device = CanvasDevice.GetSharedDevice();

        CanvasRenderTarget renderTarget = new CanvasRenderTarget(device, cardWidth, cardHeight, dpi);

        // Clear the canvas with transparent color

        using (CanvasDrawingSession ds = renderTarget.CreateDrawingSession())

        {

            // Draw text

            ds.DrawText($"Test Data", 233, 200, Windows.UI.Colors.Black, new CanvasTextFormat { FontSize = 40, FontFamily = "Helvetica Neue" });

        }

        // Save the image to local storage as a BMP file

        StorageFolder printingCardsFolder = await storageFolder.CreateFolderAsync("resources", CreationCollisionOption.OpenIfExists);

        StorageFile file = await printingCardsFolder.CreateFileAsync($"Test_Card.bmp", CreationCollisionOption.ReplaceExisting);

        using (IRandomAccessStream fileStream = await file.OpenAsync(FileAccessMode.ReadWrite))

        {

            //BitmapEncoder encoder = await BitmapEncoder.CreateAsync(BitmapEncoder.BmpEncoderId, fileStream);

            //encoder.SetPixelData(BitmapPixelFormat.Bgra8, BitmapAlphaMode.Ignore,

            //    (uint)cardWidth, (uint)cardHeight,

            //    dpi, dpi,

            //    canvasBitmap.GetPixelBytes());

            //await encoder.FlushAsync();

            await renderTarget.SaveAsync(fileStream, CanvasBitmapFileFormat.Bmp);

        }

        // Set the saved image as the source of MembershipCardImage

        BitmapImage bitmapImage = new BitmapImage(new Uri(file.Path));

        MembershipCardImage.Source = bitmapImage;

Answer 1

Default BMP file format don't support transparency, see https://en.wikipedia.org/wiki/BMP_file_format

Answer 2

Hello @Saranya Karthik ,

Welcome to Microsoft Q&A!

As Olaf said, BMP file cannot have transparency. It's inherent in the file format.

If you need to modify the background color, it is recommended to use CanvasDrawingSession.FillRectangle to draw the background color.

using (CanvasDrawingSession ds = renderTarget.CreateDrawingSession())
{
   ds.FillRectangle(new Rect(0, 0, cardWidth, cardHeight), Colors.White);          
   // Draw text
   ds.DrawText($"Test Data", 233, 200, Windows.UI.Colors.Black, new CanvasTextFormat { FontSize = 40, FontFamily = "Helvetica Neue" });
}

Thank you.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.