How to Export Blazor Diagram with Image Nodes to a PNG File?

This guide demonstrates how to export a Blazor Diagram that contains image nodes with local images to a PNG file. Local image paths are not directly accessible during the export process because they rely on the file system, which may not be available in a browser context. To address this issue, local images are converted into Base64 strings, embedding the image data directly within the diagram. This ensures that the diagram is self-contained and that all images are included seamlessly during the export. The ExportAsync method is then used to export the diagram, including the embedded images, to a PNG file.

Steps:

1.Setup the Diagram Component

-Add a SfDiagramComponent and define nodes with Image Shapes.

2.Convert Local Images to Base64

-Use the ConvertToBase64 method to embed local images in the diagram.

3.Export the Diagram

-Use the ExportAsync method to export the diagram either as a Base64 string or directly to a PNG file.

Complete Code Example:

@using Syncfusion.Blazor.Diagram
@using Syncfusion.Blazor.Buttons


<SfButton Content="ExportPng" OnClick="@ExportPng" />
<SfDiagramComponent Height="600px" @ref="@diagram" @bind-Nodes="@NodeCollection">
   
</SfDiagramComponent>

@code {
   SfDiagramComponent diagram;
   public DiagramObjectCollection<Node> NodeCollection
   {
       get;
       set;
   }
   protected override void OnInitialized()
   {

       NodeCollection = new DiagramObjectCollection<Node>();
       Node sourceNode1 = new Node()
       {
           OffsetX = 200,
           OffsetY = 200,
           Height = 200,
           Width = 200,
           ID = "sourceNode1",
           Style = new ShapeStyle() {StrokeColor = "transparent", StrokeWidth = 0 },
           Shape = new ImageShape()
           {
               Type = NodeShapes.Image,
               //Sets the source to the image shape
               Source = ConvertToBase64("wwwroot/people.png"),
           }
       };
       NodeCollection.Add(sourceNode1);
       
   }
   

   //To export the diagram as png.
   private async Task ExportPng()
   {
       DiagramExportSettings export = new DiagramExportSettings();
       await diagram.ExportAsync("diagram", DiagramExportFormat.PNG, export);
   }
   private string ConvertToBase64(string filePath)
   {
       var bytes = File.ReadAllBytes(filePath);
       return $"data:image/png;base64,{Convert.ToBase64String(bytes)}";
   }

} 

Key Points:

• Base64 Conversion: Use ConvertToBase64 to embed local images as part of the diagram, ensuring they appear correctly in exported files.
• Export Options: Export the diagram as a PNG file.
• Local Images: Ensure the image path (wwwroot/people.png) is valid and accessible within the project.

By following this approach, you can easily include local images in a diagram and export it as a PNG.

Exported File:

You can download a complete working sample here.

Conclusion:

This Blazor application demonstrates how to export a Blazor diagram with image nodes to a PNG file.

You can refer to our Blazor Diagram feature tour 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 Blazor Diagram 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, Direct-Trac, or feedback portal. We are always happy to assist you!