Edit this page

Client-side Programming Overview

Helper Methods

Name Parameters Return Type Description
$telerik.toImageEditor(object) object Casts an object to a RadImageEditor instance
$telerik.findImageEditor(id, parent) string, DOM Element object Finds a RadImageEditor instance

RadImageEditor Client-Side Methods

Name Parameters Return Type Description
addTextToImage(x, y, text) integer, integer, object Adds 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.IPixelFilter Executes the provided filter against the current editable image and adds the operation to the undo stack
changeImageOpacity(opacity, shouldUpdateUI) integer, boolean Changes the opacity of the image
closeToolsPanel() Closes the tools panel
editImageOnServer(commandName, commandText, commandArgument, callbackFunction) string, string, string, function Initiates 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) string Executes an ImageEditor's command and opens the corresponding dialog. Does not fire the client-side events.
fire(commandName, args) string, object Fires 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, boolean Flips the image in a horizontal or vertical direction
flipVertical() Flips the image in the Vertical direction
get_bottomZone() object Gets a reference to the bottom docking zone of the ToolBar panel
get_currentCommand() string Gets the currently executing command
get_currentToolWidget() object Gets the current tool widget, i.e. the object holding the dialog's functionality
get_enableResize() boolean Gets the flag to indicate whether the resizing of the ImageEditor control is enabled
get_formDecorator() object Gets the FormDecorator, used in decorating the dialog's UI
get_height() integer Gets the height of the ImageEditor control's element
get_isRedoAvailable() boolean Gets a flag whether the a redo command is available in the redo stack
get_isUndoAvailable() boolean Gets a flag whether the a undo command is available in the undo stack
get_left() integer Gets the left/x coordinate of the element's location
get_leftZone() object Gets a reference to the left docking zone of the ToolBar panel
get_location(forceCalculation) boolean Sys.UI.Point Gets the location of the ImageEditor control's element
get_lowerZoomBound() integer Gets 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() Array Gets the redo stack of operations
get_operationsToUndo() Array Gets the undo stack of operations
get_resizeHandle() DOM Element Gets a reference to the resizing handle element, i.e. the element, by which the user resizes the ImageEditor's element
get_rightZone() object Gets a reference to the bottom docking zone of the ToolBar panel
get_shortcuts() Array Gets shortcuts set to the ImageEditor control on the server
get_toolBarContainer() DOM Element Gets a reference to the Toolbar's container DOM element
get_toolBarMode() Telerik.Web.UI.ImageEditor.ToolBarMode Gets the ToolBar Mode of the ImageEditor control
get_toolBarPanel() object Gets a reference to the ToolBar panel(the movable dock container)
get_toolBarPosition() Telerik.Web.UI.ImageEditor.ToolBarPosition Gets the position of the RadImageEditor ToolBar
get_toolGroups() Array Gets a collection of the different tool groups in the Tools' panel
get_tools() Object Gets a dictionary of the present tools in the Tools' panel
get_toolsPanel() DOM Element Gets a reference to theTools' panel
get_top() integer Gets the top/y coordinate of the element's location
get_topZone() object Gets a reference to the top docking zone of the ToolBar panel
get_upperZoomBound() integer Gets 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 Element Gets a reference to the DOM element holding the edited image
get_width() integer Gets the width of the ImageEditor control's element
get_xmlHttpPanel() object Gets a reference to the XmlHttpPanel that manages the loading of the dialogs
getEditableImage() object Gets a reference to the current EditableImage
getImage() DOM Element Gets a reference to the image element being edited
initCallback(target) string Initializes an internal callback using a XmlHttpPanel
insertImage(x, y, imgSrc, operations) integer, integer, string, array Inserts image (clip art) into the editable image at the specified position
openToolsPanel() Opens the tools panel with the current tool widget
redo(depth) integer Redoes the previously undone editing steps of the image
removeShortCut(shortcutName) string Removes 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, boolean Resizes the current image. This operation changes the image.
rotateImage(rotation, shouldUpdateUI) enum, boolean Rotates 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) object Downloads the image through the browser's save dialog on the user's PC
saveImageOnServer(fileName, overwrite) object, boolean Saves the image to the server in the same directory as the original image
set_currentCommand(value) string Sets the currently executing command
set_currentToolWidget(value) enum Sets the current tool widget
set_enableResize(value) boolean Enables/disables the resizing of the ImageEditor control
set_height(value) integer Sets the height of the ImageEditor control's element
set_width(value) integer Sets the width of the ImageEditor control's element
setShortCut(shortcutName, shortcutString) string, string Sets 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) integer Undoes the last editing steps of the image
zoomBestFit() Zooms the image to best fit in the viewport
zoomImage(zoomLevel, shouldUpdateUI) integer, boolean Zooms(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

Name Parameters Return Type Description
add_imageReload(callback) Function Adds another event handler to the image's load event
addText(x, y, text) integer, integer, Telerik.Web.UI.ImageEditor.ImageText Add text to the image
applyChangesOnServer(saveImageServer, fileName, call_saveOnClient, overwrite) boolean, object, boolean, object Initiates a callback to the server and performs operations (saving image, cropping and etc.) to the image on the server
changeOpacity(opacity) integer Changes the opacity of the image
crop(rectangle) Sys.UI.Bounds Crops the image by the specified rectangular bounds
doServerOperation(commandName, commandText, commandArgument, callbackFunction) string, string, string, function Initiates an ASP.NET client callback to the server and raises the ImageEditing server side event
flip(flipDirection, clearPrevFlipDirection) enum, boolean Flips the image in specified direction
get_flipDirection() integer Gets the flip direction of the editable image
get_height() enum Gets 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() integer Gets the current opacity of the editable image
get_rotation() enum Gets the rotation enum value of the editable image
get_rotationAngle() integer Gets the rotation angel of the editable image
get_serverUrl() string Gets the src of the original image, i.e. before the server operations
get_url() string Gets the src of the edited image
get_width() integer Gets 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() integer Gets the current zoom level of the image
getImage() object Get the image being edited
insertImage(x, y, imgSrc, operations) integer, integer, string, array Inserts image (clip art) into the editable image at the specified position
remove_imageReload(callback) Function Remove a previously registered event handler
reset(imageUrl) string Resets the image to the provided image src
resize(width, height) integer, integer Resizes the image according to the specified dimensions
rotate(rotationDirection) enum Rotates the image according to the rotation direction specified
saveOnClient(fileName) object Invokes the download of the edited image to the client's machine
set_serverUrl(value) string Sets the src of the original image
zoom(zoomLevel, forceZoom) integer, boolean Zooms(scales) the image by the specified level in percentages. This operation does not change the image
zoomBestFit(width, height) integer, integer Zooms the image to best fit in the viewport

EditableCanvas Client-Side Methods

Name Parameters Return Type Description
addText(x, y, text) integer, integer, Telerik.Web.UI.ImageEditor.ImageText Add text to the image
applyChangesOnServer(saveImageServer, fileName, call_saveOnClient, overwrite) boolean, object, boolean, object Initiates 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.IPixelFilter Creates an image operation which is applied against the current editable image and adds the operation to the undo stack
changeOpacity(opacity) integer Changes the opacity of the image
crop(rectangle) Sys.UI.Bounds Crops the image by the specified rectangular bounds
doServerOperation(commandName, commandText, commandArgument, callbackFunction) string, string, string, function Initiates an ASP.NET client callback to the server and raises the ImageEditing server side event
executeFilter(filter) Telerik.Web.UI.ImageEditor.Filters.IPixelFilter Executes the provided filter against the current editable image
flip(flipDirection, clearPrevFlipDirection) enum, boolean Flips the image in specified direction
forceCurrentZoom() Ensures that the Zoom level is applied to the image
get_flipDirection() integer Gets the flip direction of the editable canvas
get_height() enum Gets 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() integer Gets the current opacity of the editable canvas
get_rotation() enum Gets the rotation enum value of the editable canvas
get_rotationAngle() integer Gets the rotation angel of the editable canvas
get_width() integer Gets 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) string string Returns the Base64 representation of the loaded image
getCanvas() DOM Element Gets the element, onto which the editing will be done
getCanvasContext() object Returns the 2d Context of the canvas element
getDataUrl(mimeType) string string Returns a URL which could be used to visualize the image directly. The image is represented in Base64 format
getImageDataAll() object Returns an ImageData object containing the image data for the given rectangle of the bitmap
insertImage(x, y, value, operationsToApply) integer, integer, string, array Inserts image (clip art) into the editable canvas at the specified position
isImageLoaded() boolean Gets a flag whether the image is loaded
isImageLoading(image) DOM Element boolean Gets a flag whether the image is loading
reset(imageUrl) string Resets the image to the provided image src
resize(width, height, imgOperation) integer, integer, object Resizes the image according to the specified dimensions
rotate(rotationDirection, angle, imgOperation) enum, integer, object Rotates the image according to the rotation direction specified
saveOnClient(fileName) object Invokes the download of the edited image to the client's machine
set_flipDirection(value) enum Sets the flip direction to the editable canvas
zoom(zoomLevel, forceZoom) integer, boolean Zooms(scales) the image by the specified level in percentages. This operation does not change the image