Product Bundles
DevCraft
All Telerik .NET tools and Kendo UI JavaScript components in one package. Now enhanced with:
Web
Mobile
Document Management
Desktop
Reporting
Testing & Mocking
CMS
UI/UX Tools
Debugging
Free Tools
Support and Learning
Productivity and Design Tools
New to Telerik UI for ASP.NET AJAX? Download free 30-day trial
The canvas tag, as part of the HTML5 specification, gives you an easy and powerful way to draw and manipulate graphics using JavaScript. You will be very impressed of the productivity and capabilities of the canvas tag in modern browsers as well as of the ability to edit the image without the unnecessary going back and forth to the server.
You could control the mode of the ImageEditor through its CanvasMode property (with a value set to "Yes" or "No"). By default the CanvasMode is "Automatic", where the ImageEditor control tries to use the CanvasMode. However if the browser does not support it, then it falls back to ImageMode automatically.
All the functionality of the ImageEditor is now implemented through <canvas> as a rendering engine. This improves significantly the functionality of the control as before all the operations were managed through the server and now they are handled on the client. Thanks to the canvas functionality now the ImageEditor has the following filters: Invert Color, Brightness and Contrast, Blur, Sharpen, Sepia and Greyscale. Also it provides a Drawing functionality.
Note, that the canvas Filters and Drawing tools are not among the tools loaded by default in the ImageEditor. In order to use them you will need to define an ImageEditorTool with a CommandName set to "InvertColor", "BrightnessContrast", "Sepia", "Greyscale", "Pencil", "Line", "DrawCircle" or "DrawRectangle".
Since Q3 2014 RadImageEditor provides two more filters: "Blur" and "Sharpen".
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="ImageEditor_Examples_CanvasSupport_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" /> <link href="styles.css" rel="stylesheet" /> </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"> Currently all modern browsers support the canvas tag very well (Mozilla, Chrome, Opera, IE9+). </qsf:MessageBox> <div class="demo-containers"> <div class="demo-container"> <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server"> <telerik:RadImageEditor RenderMode="Lightweight" ID="RadImageEditor1" runat="server" ImageUrl="~/ImageEditor/images/oranges.jpg" CanvasMode="Yes" Width="1080px" Height="430px"> </telerik:RadImageEditor> </telerik:RadAjaxPanel> </div> </div> <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1"> <Views> <qsf:View> <qsf:RadioButtonList ID="RadiosTools" runat="server" AutoPostBack="true" OnSelectedIndexChanged="RadiosTools_SelectedIndexChanged" Label="Choose Mode"> <asp:ListItem Text="Canvas Mode" Selected="True"></asp:ListItem> <asp:ListItem Text="Image Mode"></asp:ListItem> </qsf:RadioButtonList> </qsf:View> </Views> </qsf:ConfiguratorPanel> </form> </body> </html>