New to Telerik UI for ASP.NET AJAXStart a free 30-day trial

Client-side Programming Overview

Helper Methods

NameParametersReturn TypeDescription
$telerik.toImageEditor(object)objectCasts an object to a RadImageEditor instance
$telerik.findImageEditor(id, parent)string, DOM ElementobjectFinds a RadImageEditor instance

RadImageEditor Client-Side Methods

NameParametersReturn TypeDescription
addTextToImage(x, y, text)integer, integer, objectAdds text to the image in the specified position
applyChangesOnServer()Forces the changes made to the image to be applied on the server
applyFilter(filterName)Telerik.Web.UI.ImageEditor.Filters.IPixelFilterExecutes the provided filter against the current editable image and adds the operation to the undo stack
changeImageOpacity(opacity, shouldUpdateUI)integer, booleanChanges the opacity of the image
closeToolsPanel()Closes the tools panel
editImageOnServer(commandName, commandText, commandArgument, callbackFunction)string, string, string, functionInitiates an ASP.NET client callback to the server and raises the ImageEditing server side event. The EditableImage can be retrieved from the event arguments, and edited accordingly
executeCommand(commandName)stringExecutes an ImageEditor's command and opens the corresponding dialog. Does not fire the client-side events.
fire(commandName, args)string, objectFires an ImageEditor's command with the full set of client-side events
flipHorizontal()Flips the image in the Horizontal direction
flipImage(flipDirection, shouldUpdateUI, forceChanges)enum, boolean, booleanFlips the image in a horizontal or vertical direction
flipVertical()Flips the image in the Vertical direction
get_bottomZone()objectGets a reference to the bottom docking zone of the ToolBar panel
get_currentCommand()stringGets the currently executing command
get_currentToolWidget()objectGets the current tool widget, i.e. the object holding the dialog's functionality
get_enableResize()booleanGets the flag to indicate whether the resizing of the ImageEditor control is enabled
get_formDecorator()objectGets the FormDecorator, used in decorating the dialog's UI
get_height()integerGets the height of the ImageEditor control's element
get_isRedoAvailable()booleanGets a flag whether the a redo command is available in the redo stack
get_isUndoAvailable()booleanGets a flag whether the a undo command is available in the undo stack
get_left()integerGets the left/x coordinate of the element's location
get_leftZone()objectGets a reference to the left docking zone of the ToolBar panel
get_location(forceCalculation)booleanSys.UI.PointGets the location of the ImageEditor control's element
get_lowerZoomBound()integerGets the upper limit of the zoom level. This is the highest percentage value up to which the user can zoom in the image in the RadImageEditor
get_operationsToRedo()ArrayGets the redo stack of operations
get_operationsToUndo()ArrayGets the undo stack of operations
get_resizeHandle()DOM ElementGets a reference to the resizing handle element, i.e. the element, by which the user resizes the ImageEditor's element
get_rightZone()objectGets a reference to the bottom docking zone of the ToolBar panel
get_shortcuts()ArrayGets shortcuts set to the ImageEditor control on the server
get_toolBarContainer()DOM ElementGets a reference to the Toolbar's container DOM element
get_toolBarMode()Telerik.Web.UI.ImageEditor.ToolBarModeGets the ToolBar Mode of the ImageEditor control
get_toolBarPanel()objectGets a reference to the ToolBar panel(the movable dock container)
get_toolBarPosition()Telerik.Web.UI.ImageEditor.ToolBarPositionGets the position of the RadImageEditor ToolBar
get_toolGroups()ArrayGets a collection of the different tool groups in the Tools' panel
get_tools()ObjectGets a dictionary of the present tools in the Tools' panel
get_toolsPanel()DOM ElementGets a reference to theTools' panel
get_top()integerGets the top/y coordinate of the element's location
get_topZone()objectGets a reference to the top docking zone of the ToolBar panel
get_upperZoomBound()integerGets the upper limit of the zoom level. This is the highest percentage value up to which the user can zoom in the image in the RadImageEditor
get_viewport()DOM ElementGets a reference to the DOM element holding the edited image
get_width()integerGets the width of the ImageEditor control's element
get_xmlHttpPanel()objectGets a reference to the XmlHttpPanel that manages the loading of the dialogs
getEditableImage()objectGets a reference to the current EditableImage
getImage()DOM ElementGets a reference to the image element being edited
initCallback(target)stringInitializes an internal callback using a XmlHttpPanel
insertImage(x, y, imgSrc, operations)integer, integer, string, arrayInserts image (clip art) into the editable image at the specified position
openToolsPanel()Opens the tools panel with the current tool widget
redo(depth)integerRedoes the previously undone editing steps of the image
removeShortCut(shortcutName)stringRemoves a shortcut with the specified name (keyword)
repaint()Redraws the ImageEditor
resetChanges()Resets the changes to the current image and reverts it to the original one
resizeImage(width, height, shouldUpdateUI)integer, integer, booleanResizes the current image. This operation changes the image.
rotateImage(rotation, shouldUpdateUI)enum, booleanRotates the current image clockwise with the specified enum angle value
rotateLeft90()Rotates the current image 90 degrees counterclockwise, i.e. 270 degrees clockwise
rotateRight90()Rotates the current image 90 degrees clockwise
saveClientState()Stores the client-state changes made during the client-side existance of the control
saveImageOnClient(fileName)objectDownloads the image through the browser's save dialog on the user's PC
saveImageOnServer(fileName, overwrite)object, booleanSaves the image to the server in the same directory as the original image
set_currentCommand(value)stringSets the currently executing command
set_currentToolWidget(value)enumSets the current tool widget
set_enableResize(value)booleanEnables/disables the resizing of the ImageEditor control
set_height(value)integerSets the height of the ImageEditor control's element
set_width(value)integerSets the width of the ImageEditor control's element
setShortCut(shortcutName, shortcutString)string, stringSets a shortcut with the specified name (keyword) and shortcut string (the combination of keys). If the shortcut name exists, the existing shortcut is removed
setToggleState(toolName, value)string, boolean(Un)checks a ToolBar button
undo(depth)integerUndoes the last editing steps of the image
zoomBestFit()Zooms the image to best fit in the viewport
zoomImage(zoomLevel, shouldUpdateUI)integer, booleanZooms(scales) the image by the specified level in percents. This operation does not change the image
zoomIn()Zooms in the current image by 50%, i.e. if the current zoom level is 100, after zoom in the level will be 150
zoomOut()Zooms out the current image by 50%, i.e. if the current zoom level is 100, after zoom in the level will be 50

EditableImage Client-Side Methods

NameParametersReturn TypeDescription
add_imageReload(callback)FunctionAdds another event handler to the image's load event
addText(x, y, text)integer, integer, Telerik.Web.UI.ImageEditor.ImageTextAdd text to the image
applyChangesOnServer(saveImageServer, fileName, call_saveOnClient, overwrite)boolean, object, boolean, objectInitiates a callback to the server and performs operations (saving image, cropping and etc.) to the image on the server
changeOpacity(opacity)integerChanges the opacity of the image
crop(rectangle)Sys.UI.BoundsCrops the image by the specified rectangular bounds
doServerOperation(commandName, commandText, commandArgument, callbackFunction)string, string, string, functionInitiates an ASP.NET client callback to the server and raises the ImageEditing server side event
flip(flipDirection, clearPrevFlipDirection)enum, booleanFlips the image in specified direction
get_flipDirection()integerGets the flip direction of the editable image
get_height()enumGets the current height of the image. Note that value may be different that the height of the image DOM element (e.g. when zoomed)
get_opacity()integerGets the current opacity of the editable image
get_rotation()enumGets the rotation enum value of the editable image
get_rotationAngle()integerGets the rotation angel of the editable image
get_serverUrl()stringGets the src of the original image, i.e. before the server operations
get_url()stringGets the src of the edited image
get_width()integerGets the current width of the image. Note that value may be different that the width of the image DOM element (e.g when zoomed)
get_zoomLevel()integerGets the current zoom level of the image
getImage()objectGet the image being edited
insertImage(x, y, imgSrc, operations)integer, integer, string, arrayInserts image (clip art) into the editable image at the specified position
remove_imageReload(callback)FunctionRemove a previously registered event handler
reset(imageUrl)stringResets the image to the provided image src
resize(width, height)integer, integerResizes the image according to the specified dimensions
rotate(rotationDirection)enumRotates the image according to the rotation direction specified
saveOnClient(fileName)objectInvokes the download of the edited image to the client's machine
set_serverUrl(value)stringSets the src of the original image
zoom(zoomLevel, forceZoom)integer, booleanZooms(scales) the image by the specified level in percentages. This operation does not change the image
zoomBestFit(width, height)integer, integerZooms the image to best fit in the viewport

EditableCanvas Client-Side Methods

NameParametersReturn TypeDescription
addText(x, y, text)integer, integer, Telerik.Web.UI.ImageEditor.ImageTextAdd text to the image
applyChangesOnServer(saveImageServer, fileName, call_saveOnClient, overwrite)boolean, object, boolean, objectInitiates a callback to the server and performs operations (saving image, cropping and etc.) to the image on the server
applyFilter(filter)Telerik.Web.UI.ImageEditor.Filters.IPixelFilterCreates an image operation which is applied against the current editable image and adds the operation to the undo stack
changeOpacity(opacity)integerChanges the opacity of the image
crop(rectangle)Sys.UI.BoundsCrops the image by the specified rectangular bounds
doServerOperation(commandName, commandText, commandArgument, callbackFunction)string, string, string, functionInitiates an ASP.NET client callback to the server and raises the ImageEditing server side event
executeFilter(filter)Telerik.Web.UI.ImageEditor.Filters.IPixelFilterExecutes the provided filter against the current editable image
flip(flipDirection, clearPrevFlipDirection)enum, booleanFlips the image in specified direction
forceCurrentZoom()Ensures that the Zoom level is applied to the image
get_flipDirection()integerGets the flip direction of the editable canvas
get_height()enumGets the current height of the image. Note that value may be different that the height of the image DOM element (e.g. when zoomed)
get_opacity()integerGets the current opacity of the editable canvas
get_rotation()enumGets the rotation enum value of the editable canvas
get_rotationAngle()integerGets the rotation angel of the editable canvas
get_width()integerGets the current width of the image. Note that value may be different that the width of the image DOM element (e.g when zoomed)
getBase64(mimeType)stringstringReturns the Base64 representation of the loaded image
getCanvas()DOM ElementGets the element, onto which the editing will be done
getCanvasContext()objectReturns the 2d Context of the canvas element
getDataUrl(mimeType)stringstringReturns a URL which could be used to visualize the image directly. The image is represented in Base64 format
getImageDataAll()objectReturns an ImageData object containing the image data for the given rectangle of the bitmap
insertImage(x, y, value, operationsToApply)integer, integer, string, arrayInserts image (clip art) into the editable canvas at the specified position
isImageLoaded()booleanGets a flag whether the image is loaded
isImageLoading(image)DOM ElementbooleanGets a flag whether the image is loading
reset(imageUrl)stringResets the image to the provided image src
resize(width, height, imgOperation)integer, integer, objectResizes the image according to the specified dimensions
rotate(rotationDirection, angle, imgOperation)enum, integer, objectRotates the image according to the rotation direction specified
saveOnClient(fileName)objectInvokes the download of the edited image to the client's machine
set_flipDirection(value)enumSets the flip direction to the editable canvas
zoom(zoomLevel, forceZoom)integer, booleanZooms(scales) the image by the specified level in percentages. This operation does not change the image
Not finding the help you need?
Contact Support