Save an image using Maui.net graphics

Question

How do I save Maui.net graphics to png file ?

Accepted Answer

Hello,

You can install Microsoft.Maui.Graphics.Skia in the nuget package manager, then use SkiaBitmapExportContext to create a bitmap in memory and draw on its Canvas

   using Microsoft.Maui.Graphics;  
   using Microsoft.Maui.Graphics.Skia;  
     
    SkiaBitmapExportContext skiaBitmapExportContext= new(width, height, displayScale);  
    ICanvas canvas = skiaBitmapExportContext.Canvas;

After drawing, you can save image as png file with WriteToFile method, I save this image at FileSystem.Current.AppDataDirectory path.

   string mainDir = FileSystem.Current.AppDataDirectory;  
           string filePath = Path.Combine(mainDir, "MyTest.png");  
           // Save the image as a PNG file  
           skiaBitmapExportContext.WriteToFile(filePath);

Best Regards,

Leon Lu

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.

Answer

//HOW TO DRAW ON AN IMAGE USING MICROSOFT.MAUI.GRAPHICS AND PASTE OVER AN IMAGE USING SKIASHARP

//load an image

IImage image = await LoadImageAsync();

// Create SkiaBitmapExportContext with transparence

using (var skiaBitmapExportContext = new SkiaBitmapExportContext((int)image.Width, (int)image.Height, 1, 72, true, true))

{

//Create a SKCanvas

using var bitmap = new SKBitmap((int)image.Width, (int)image.Height);

using var skCanvas = new SKCanvas(bitmap);

//Draw an image

using var stream0= new MemoryStream(image.AsBytes());

using var skImage = SKImage.FromEncodedData(stream0);

stream0.Position = 0;

skCanvas.DrawImage(skImage, new SKPoint(0, 0));

//Get a Microsoft.Maui.Graphics.ICanvas used by Maui to draw

ICanvas canvas = skiaBitmapExportContext.Canvas;

// Draw a red line using Maui 

canvas.StrokeColor = Colors.Red;

canvas.StrokeSize = 8;

canvas.DrawLine(new Microsoft.Maui.Graphics.PointF(100, 100), new Microsoft.Maui.Graphics.PointF(500, 500));

canvas.SaveState();

//Create a stream to save the draw on ICanvas to SKCanvas

using var stream1= new MemoryStream();

skiaBitmapExportContext.WriteToStream(stream1);

stream1.Position = 0; // Reset position to start

//Send draw as image with transparence to SKCanvas applying over image sent before

using var skImageApliques = SKImage.FromEncodedData(stream1);

skCanvas.DrawImage(skImageApliques, new SKPoint(0, 0));

//Upload to Azure Blob Storage or wherever you want

var stream2 = new MemoryStream();

bitmap.Encode(stream2, SKEncodedImageFormat.Jpeg, 100);

stream2.Position = 0; // Reset position to start

await UploadPDFAsMemoryStream(blobClient, "ImagemWithDraw.jpg", stream2);

//Maybe just one stream be enough

}

Answer

Hi, I'm just getting a blank screen when I implement the above - but with no errors.

My project is using net7

Target is Android API 33

Maui Graphics 7.0.81

Microsoft.Maui.Graphics.Skia 7.0.81

Any ideas as to why this may not be working?

Or should I be using PlatformCanvas?

Thanks

matt

Share via

Save an image using Maui.net graphics

3 additional answers

Your answer