New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Filters

Currently all modern browsers support the canvas tag very well (Mozilla, Chrome, Opera, IE9+).

  • Save Image
  • Undo
  • Redo
  • Reset Changes
  • Brightness/Contrast
  • Invert Colors (negative)
  • Sepia
  • Greyscale
  • Hue/Saturation
  • Blur
  • Sharpen
Zoom:100%Size:0x0pxPos.:(-,-)Last Action:None

Utilizing the functionality of the Canvas object, the ImageEditor offers the ability to apply different filters to the edited image. The control offers built-in tools for these filters with the following CommandNames:

  • InvertColors
  • BrightnessContrast
  • Sepia
  • Greyscale
  • HueSaturation
  • Blur
  • Sharpen

Note, that the canvas Filters are not among the tools loaded by default in the ImageEditor. In order to use them you will need to define an ImageEditorTool using the above mentioned CommandNames.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Title="" Language="C#"  AutoEventWireup="true"
    CodeFile="DefaultCS.aspx.cs" Inherits="ImageEditor_Examples_Filters_DefaultCS" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="../../common/styles.css" rel="stylesheet" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <qsf:MessageBox ID="InformationBox1" runat="server" Type="Info" Icon="Info">
        <p>
            Currently all modern browsers support the canvas tag very well (Mozilla, Chrome,
        Opera, IE9+).
        </p>
    </qsf:MessageBox>
    <div class="demo-container size-medium">
        <telerik:RadImageEditor RenderMode="Lightweight" ID="RadImageEditor1" runat="server" ImageUrl="~/ImageEditor/images/ladybug1.jpg" Width="590" Height="430px">
            <Tools>
                <telerik:ImageEditorToolGroup>
                    <telerik:ImageEditorTool CommandName="Save"></telerik:ImageEditorTool>
                    <telerik:ImageEditorToolSeparator></telerik:ImageEditorToolSeparator>
                    <telerik:ImageEditorToolStrip CommandName="Undo">
                    </telerik:ImageEditorToolStrip>
                    <telerik:ImageEditorToolStrip CommandName="Redo">
                    </telerik:ImageEditorToolStrip>
                    <telerik:ImageEditorTool CommandName="Reset"></telerik:ImageEditorTool>
                    <telerik:ImageEditorToolSeparator></telerik:ImageEditorToolSeparator>
                    <telerik:ImageEditorTool CommandName="BrightnessContrast"></telerik:ImageEditorTool>
                    <telerik:ImageEditorTool CommandName="InvertColor"></telerik:ImageEditorTool>
                    <telerik:ImageEditorTool CommandName="Sepia"></telerik:ImageEditorTool>
                    <telerik:ImageEditorTool CommandName="Greyscale"></telerik:ImageEditorTool>
                    <telerik:ImageEditorTool CommandName="HueSaturation"></telerik:ImageEditorTool>
                    <telerik:ImageEditorToolSeparator></telerik:ImageEditorToolSeparator>
                    <telerik:ImageEditorTool CommandName="Blur"></telerik:ImageEditorTool>
                    <telerik:ImageEditorTool CommandName="Sharpen"></telerik:ImageEditorTool>
                </telerik:ImageEditorToolGroup>
            </Tools>
        </telerik:RadImageEditor>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance