Frames in the ASP.NET CORE Image Editor control

18 Jun 20247 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 drawFrame 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 drawFrame 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 drawFrame method.

@{
    var imageTool = new string[] { };
}

<div class="col-lg-12 control-section e-img-editor-sample">
    <ejs-imageeditor id="image-editor" created="created" toolbar="@imageTool"></ejs-imageeditor>
</div>
<ejs-button id="matbtnClick" onclick="matClick()" cssClass="e-primary" content="Mat"></ejs-button>
<ejs-button id="bevelbtnClick" onclick="bevelClick()" cssClass="e-primary" content="Bevel"></ejs-button>
<ejs-button id="linebtnClick" onclick="lineClick()" cssClass="e-primary" content="Line"></ejs-button>
<ejs-button id="insetbtnClick" onclick="insetClick()" cssClass="e-primary" content="Inset"></ejs-button>
<ejs-button id="hookbtnClick" onclick="hookClick()" cssClass="e-primary" content="Hook"></ejs-button>
<ejs-button id="invertbtnClick" onclick="invertClick()" cssClass="e-primary" content="Invert"></ejs-button>

<script>
    function created() {
        var imageEditorObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
        if (ej.base.Browser.isDevice) {
            imageEditorObj.open('https://ej2.syncfusion.com/demos/src/image-editor/images/flower.png');
        } else {
            imageEditorObj.open('https://ej2.syncfusion.com/demos/src/image-editor/images/bridge.png');
        }
    }
    
    function matClick() {
        var imgObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
        imgObj.drawFrame(ej.imageeditor.FrameType.Mat, 'red', 'blue', 20, 20, 20, 20, ej.imageeditor.FrameLineStyle.Solid, 1);
    }
    function bevelClick() {
        var imgObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
        imgObj.drawFrame(ej.imageeditor.FrameType.Bevel, 'red', 'blue', 20, 20, 20, 20, ej.imageeditor.FrameLineStyle.Solid, 1);
    }
    function lineClick() {
        var imgObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
        imgObj.drawFrame(ej.imageeditor.FrameType.Line, 'red', 'blue', 20, 20, 20, 20, ej.imageeditor.FrameLineStyle.Solid, 1);
    }
    function insetClick() {
        var imgObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
        imgObj.drawFrame(ej.imageeditor.FrameType.Inset, 'red', 'blue', 20, 20, 20, 20, ej.imageeditor.FrameLineStyle.Solid, 1);
    }
    function hookClick() {
        var imgObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
        imgObj.drawFrame(ej.imageeditor.FrameType.Hook, 'red', 'blue', 20, 20, 20, 20, ej.imageeditor.FrameLineStyle.Solid, 1);
    }

</script>

<style>
    .image-editor {
        margin: 0 auto;
    }

    .e-img-editor-sample {
        height: 80vh;
        width: 100%;
    }

    @@media only screen and (max-width: 700px) {
        .e-img-editor-sample {
            height: 75vh;
            width: 100%;
        }
    }

    .control-wrapper {
        height: 100%;
    }
</style>
public ActionResult Default()
{
    return View();
}

Output be like the below.

ImageEditor Sample

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

  • FrameChangeEventArgs.previousFrameSetting - The frame settings including size, color, inset, offset, gradient color which is applied before changing the frame.

  • FrameChangeEventArgs.currentFrameSetting - The frame settings including size, color, inset, offset, gradient color which is going to apply after changing the frame.

  • FrameChangeEventArgs.cancel - Specifies a boolean value to cancel the frame changing action.