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

Insert Text

  • Reset Changes
  • Add Text
Zoom:100%Size:0x0pxPos.:(-,-)Last Action:None

With the RadImageEditor the users can easily add text to their images at the desired position, styled with the color they have chosen and can make the text as large (or small) as they want. Once the built-in tool is activated a moveable text that reflects the current color and size of the text, appears on the image. The position can be adjusted by dragging the movable text, as well as by manually changing the Top-Left coordinates from the dialog.
The sample text, "Your Text Here..." is localizable and can be changed either by modifying the .RESX localization files (recommended) or by changing the RadImageEditor.Localization.Dialogs.AddText_SampleText property from the code-behind.

Note: Please take into consideration that the operation of inserting the text on the picture is performed on the server, and there might be differences between the preview shown and the actual result.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
<%@ Page Language="vb" Inherits="Telerik.Web.Examples.ImageEditor.AddText.DefaultVB" CodeFile="DefaultVB.aspx.vb"  %>

<!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" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-narrow">
        <telerik:RadImageEditor RenderMode="Lightweight" ID="RadImageEditor1" runat="server" ImageUrl="~/ImageEditor/images/addtext.jpg" Width="490" Height="360px">
            <Tools>
                <telerik:ImageEditorToolGroup>
                    <telerik:ImageEditorTool CommandName="Reset"></telerik:ImageEditorTool>
                    <telerik:ImageEditorTool CommandName="AddText"></telerik:ImageEditorTool>
                </telerik:ImageEditorToolGroup>
            </Tools>
        </telerik:RadImageEditor>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance