ImageEditor - 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
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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 PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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>

Find Assistance

Help Us Improve

Was this example helpful?