New to Telerik UI for ASP.NET AJAX? Start a free 30-day trial
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 |