Exporting an image

There are multiple ways of exporting a image to a Base64 string depending on your needs

Call Doodle Export

The first way of exporting an image would be to call the export functionality on the reference of the Doodle object.

<div style="height: 50vh;">
    <DoodleDraw @ref="_doodleDraw">
        
    </DoodleDraw>
</div>

@code {
    private DoodleDraw _doodleDraw;

    // Called from a custom button click
    private async Task OnExportButtonClick() 
    {
        ...
        string base64Data = await _doodleDraw.ExportDoodleToImage();
        ...                
    }
}
    

Doodle Export Event Callback

The second way of exporting an image would be to set the callback event property on the Doodle.

<div style="height: 50vh;">
    <DoodleDraw @ref="_doodleDraw" OnExportImage="RenderExportImage">
        
    </DoodleDraw>
</div>

@code {
    private void RenderExportImage(string base64Image) 
    {
        ...
    }
}
    

Export Image Handler

The last way of exporting an image would be to create a custom export image handler. Below is an example of creating such a handler

       
    namespace YourNamespace
    {
        public delegate void OnExportImageBase64Handler(object sender, string base64Image);

        public class MyExportHandler : Abstractions.Interfaces.IDoodleExportHandler
        {

            public event OnExportImageBase64Handler OnExportImageBase64;

            public Task ExportImageBase64(string base64ImageData)
            {
                OnExportImageBase64?.Invoke(this, base64ImageData);
                return Task.CompletedTask;
            }
        }

    }
       
    

Lastly, you need to register you export handler in the containers. This can be done when registering the Doodle Services

      services.UseDoodle((config) => 
      {
          ...
      }, 
      exportHandler: () => new MyExportHandler(),
      ...
    }
    

Export Options

The Doodle component uses HTML2Canvas to render the canvas component to an Image and the export options used is defined in the startup configuration. When calling the ExportDoodleToImage on the component directly, it can also be passed to this method. The options correspond directly to the options on the HTML2Canvas Component and the help/documentation can be found there.

      services.UseDoodle((config) => 
      {
        ...
        config.Html2CanvasConfig = new Doodle.Abstractions.Config.Html2CanvasConfig()
        {
            ...
            UseCORS = true
            ...
        };
        ...
      }, 
      exportHandler: () => new MyExportHandler(),
      ...
    }
    

This is the HTML2Canvas Configuration structure with the defaults.

        public bool AllowTaint { get; set; } = true;

        public string BackgroundColor { get; set; } = null;

        public bool? ForeignObjectRendering { get; set; }

        public int? ImageTimeout { get; set; }

        public bool? Logging { get; set; }

        public string Proxy { get; set; } = null;

        public bool? RemoveContainer { get; set; }

        public bool UseCORS { get; set; } = true;

        public double? Scale { get; set; }

        public double? Width { get; set; }

        public double? Height { get; set; }

        public double? X { get; set; }

        public double? Y { get; set; }

        public double? ScrollX { get; set; }

        public double? ScrollY { get; set; }

        public double? WindowHeight { get; set; }

        public double? WindowWidth { get; set; }