Frames in the Blazor Image Editor component

6 Oct 20233 minutes to read

The frame feature in an Image Editor provides users with the capability to add decorative borders or frames around their images. Frames are a visual design element that can enhance the overall appearance and appeal of an image.

Apply frame to the Image

The DrawFrameAsync method is a function designed to enable the application of various frame options to an image. This method simplifies the process of adding decorative frames, such as mat, bevel, line, hook, and inset, to an image by allowing users to specify their desired frame type.

Depending on the frame type selected, users may have additional customization options, such as adjusting the frame’s thickness, color, texture, or other attributes. This allows for fine-tuning the appearance of the frame to match the image’s theme or the user’s preferences

The DrawFrameAsync method in the Image Editor control takes nine parameters to define the properties of the frame to the image:

  • frameType - Specified the image data or url of the image to be inserted.

  • color - Specifies the color for the frame.

  • gradientColor - Specifies the gradient color for the frame.

  • size - Specifies the size of the frame.

  • inset - Specifies the inset value for line, hook, and inset type frames.

  • offset - Specifies the offset value for line and inset type frames.

  • borderRadius - Specifies the border radius for line type frame.

  • frameLineStyle - Specifies the frame line style for line type frame.

  • lineCount - Specifies the line count for the line type frame.

Here is an example of Frame using the DrawFrameAsync method.

@using Syncfusion.Blazor.ImageEditor
@using Syncfusion.Blazor.Buttons

<div style="padding-bottom: 15px">
    <SfButton OnClick="MatClick">Mat</SfButton>
    <SfButton OnClick="BevelClick">Bevel</SfButton>
    <SfButton OnClick="LineClick">Line</SfButton>
    <SfButton OnClick="InsetClick">Inset</SfButton>
    <SfButton OnClick="HookClick">Hook</SfButton>
</div>

<SfImageEditor @ref="ImageEditor" Toolbar="customToolbarItem" Height="400">
    <ImageEditorEvents Created="CreatedAsync"></ImageEditorEvents>
</SfImageEditor>

@code {
    SfImageEditor ImageEditor;
    private List<ImageEditorToolbarItemModel> customToolbarItem = new List<ImageEditorToolbarItemModel>() { };

    private async void CreatedAsync()
    {
        await ImageEditor.OpenAsync("nature.png");
    }

    private async void MatClick()
    {
        await ImageEditor.DrawFrameAsync(FrameType.Mat, "red", "blue", 20, 20, 20, 20, FrameLineStyle.Solid, 1);
    }

    private async void BevelClick()
    {
        await ImageEditor.DrawFrameAsync(FrameType.Bevel, "red", "blue", 20, 20, 20, 20, FrameLineStyle.Solid, 1);
    }

    private async void LineClick()
    {
        await ImageEditor.DrawFrameAsync(FrameType.Line, "red", "blue", 20, 20, 20, 20, FrameLineStyle.Solid, 1);
    }

    private async void InsetClick()
    {
        await ImageEditor.DrawFrameAsync(FrameType.Inset, "red", "blue", 20, 20, 20, 20, FrameLineStyle.Solid, 1);
    }

    private async void HookClick()
    {
        await ImageEditor.DrawFrameAsync(FrameType.Hook, "red", "blue", 20, 20, 20, 20, FrameLineStyle.Solid, 1);
    }

}

Blazor Image Editor with Frame an image

Frame changing event

The FrameChanging event is triggered when applying frame on the image. This event provides information encapsulated within an object, which includes details about the frame applied in an image. This information encompasses:

Frame Type: This indicates the specific type of frame being applied, whether it’s a mat, bevel, line, or hook.

Customization Values: These values contain information about any adjustments or modifications made to the frame. For instance, if the frame can be customized with attributes like color, size, or style, these details are conveyed within the event object.

The parameter available in the FrameChangeEventArgs is