Blazor Image Editor Component example for custom toolbar

[Biju Rajan]

Hello,

I was referring to the example for the new Blazor Syncfusion Image Editor component 

https://blazor.syncfusion.com/demos/image-editor/default-functionalities?theme=bootstrap5

I wanted to have a custom toolbar item for 'SaveImage', and have that save the updated image. Currently looks like I can only export the image, but not save the image directly.

Could you point me to example where you handle the same?

Cheers

[Keerthikaran Venkatachalam]

Hi Biju,

We have checked the reported query and prepared a sample based on your requirements. Refer to the below code snippet.

@using Syncfusion.Blazor.ImageEditor

@using Syncfusion.Blazor.Navigations

 

<SfImageEditor @ref="ImageEditor" Toolbar="customToolbarItem" Height="500">

    <ImageEditorEvents Created="created" ToolbarItemClicked="ToolbarItemClicked"></ImageEditorEvents>

</SfImageEditor>

 

@code {

    SfImageEditor ImageEditor;

    byte[] byteArray;

    private async void created()

    {

        await ImageEditor.OpenAsync("bridge.png");

    }

 

    private List<ImageEditorToolbarItemModel> customToolbarItem = new List<ImageEditorToolbarItemModel>()

    {

        new ImageEditorToolbarItemModel { Name = "Zoom" },

        new ImageEditorToolbarItemModel { Name = "Annotation" },

        new ImageEditorToolbarItemModel { Name = "Finetune" },

        new ImageEditorToolbarItemModel { Name = "Filter" },

        new ImageEditorToolbarItemModel { Name = "Confirm" },

        new ImageEditorToolbarItemModel { Name = "Reset" },

        new ImageEditorToolbarItemModel { Text = "Save Image", TooltipText = "SaveImage", Align = ItemAlign.Center },

        new ImageEditorToolbarItemModel { Text = "Set Image", TooltipText = "SetImage", Align = ItemAlign.Center }

    };

 

    private async void ToolbarItemClicked(Syncfusion.Blazor.Navigations.ClickEventArgs args)

    {

        if (args.Item.Text == "Save Image")

        {

            var dataUrl = await ImageEditor.GetImageDataUrlAsync();

            string base64Data = dataUrl.Split(',')[1];

            // Convert the base64-encoded data to a byte array

            byteArray = Convert.FromBase64String(base64Data);

        }

        if (args.Item.Text == "Set Image")

        {

            await ImageEditor.ResetAsync();

            string base64String = Convert.ToBase64String(byteArray);

            base64String = "data:image/png;base64," + base64String;

            await ImageEditor.OpenAsync(base64String);

        }

    }

}

 

Note: We have fixed some issues related to the custom toolbar recently. The fix will be available in the latest patch release. So, we suggest you upgrade our Syncfusion packages to our latest version to resolve this issue on your end (22.1.39).

Then only the provided code snippet works properly.

Package Link: https://www.nuget.org/packages/Syncfusion.Blazor.ImageEditor

Get back to us if you need any further assistance on this.

Regards,

KeerthiKaran K V