Introduction
Knowledge Base
API Reference / Client-side / Telerik.Web.UI.ImageEditor.EditableCanvas
New to Telerik UI for ASP.NET AJAX? Start a free 30-day trial

Telerik.Web.UI.ImageEditor.EditableCanvas

Class

Definition

Namespace:Telerik.Web.UI.ImageEditor

Inheritance: Telerik.Web.UI.ImageEditor.EditableImageBaseTelerik.Web.UI.ImageEditor.EditableCanvas

Methods

addText

Adds text to the image in the specified position

JS
addText(Number x, Number y, Telerik.Web.UI.ImageEditor.ImageText text): void
Parameters:xNumber

The X coordinate of the text

yNumber

The Y coordinate of the text

textTelerik.Web.UI.ImageEditor.ImageText

The text to add to the image.

applyChangesOnServer

Initiates a callback to the server and performs operations (saving image, cropping and etc.) to the image on the server.

JS
applyChangesOnServer(Boolean saveImageServer, Object fileName, Boolean call_saveOnClient, Boolean overwrite): void
Parameters:saveImageServerBoolean

True

fileNameObject

The filename of the image. If null then the original filename is used. If file name is not a string

call_saveOnClientBoolean

True

overwriteBoolean

True

applyFilter

Creates an image operation which is applied against the current editable image and adds the operation to the undo stack.

JS
applyFilter(Telerik.Web.UI.ImageEditor.Filters.IPixelFilter filter, Object imgOperation): void
Parameters:filterTelerik.Web.UI.ImageEditor.Filters.IPixelFilter

The filter to be applied.

imgOperationObject

The image operation object handling the actual editing of the image.

changeOpacity

Changes the opacity of the image.

JS
changeOpacity(Number opacity, Object imgOperation): void
Parameters:opacityNumber

The new value of the opacity.

imgOperationObject

The image operation object handling the actual editing of the image.

crop

Crops the image to the given rectangle.

JS
crop(Object rectangle): void
Parameters:rectangleObject

The rectangle defined by coordinates and dimensions to crop.

doServerOperation

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.

JS
doServerOperation(String commandName, String commandText, String commandArgument, Function callbackFunction): void
Parameters:commandNameString

The command name that will be passed to the server and respective client events. It should be unique.

commandTextString

The command text that will be used to record the operation in the Undo

commandArgumentString

The additional command argument that will be passed to the server. By default empty string is passed.

callbackFunctionFunction

The function that will be called after response is received from the server. Two parameters are sent to this function

executeFilter

Executes the provided filter against the current editable image.

JS
executeFilter(Telerik.Web.UI.ImageEditor.Filters.IPixelFilter filter): void
Parameters:filterTelerik.Web.UI.ImageEditor.Filters.IPixelFilter

The filter to be executed.

flip

Flips the image in the specified direction.

JS
flip(Telerik.Web.UI.ImageEditor.FlipDirection flipDirection, Boolean clearPrevFlipDirection, Object imgOperation): void
Parameters:flipDirectionTelerik.Web.UI.ImageEditor.FlipDirection

The direction of flipping.

clearPrevFlipDirectionBoolean

True

imgOperationObject

The image operation object handling the actual editing of the image.

forceCurrentZoom

Ensures that the Zoom level is applied to the image

JS
forceCurrentZoom(): void

get_flipDirection

Gets the flip direction of the editable canvas.

JS
get_flipDirection(): Telerik.Web.UI.ImageEditor.FlipDirection
Returns:

Telerik.Web.UI.ImageEditor.FlipDirection

Enum value of the flip direction

get_height

Gets the current height of the canvas. Note that value may be different that the height of the image DOM element, for example, when zoomed.

JS
get_height(): Number
Returns:

Number

The height of the editable image

get_opacity

Gets the current opacity of the editable canvas.

JS
get_opacity(): Number
Returns:

Number

The opacity value of the editable canvas. Range

get_rotation

Gets the rotation enum value of the editable canvas.

JS
get_rotation(): Telerik.Web.UI.ImageEditor.Rotation
Returns:

Telerik.Web.UI.ImageEditor.Rotation

Enum value of the rotation.

get_rotationAngle

Gets the rotation angle of the editable canvas.

JS
get_rotationAngle(): Number
Returns:

Number

The value in degrees of the image rotation.

get_width

Gets the current width of the canvas. Note that value may be different that the width of the image DOM element, for example, when zoomed.

JS
get_width(): Number
Returns:

Number

The width of the editable image

getBase64

Returns the Base64 representation of the loaded image.

JS
getBase64(String mimeType): String
Parameters:mimeTypeString

The currently supported types are Image

Returns:

String

The string that represents the encoded graphical data.

getCanvas

Gets the element, onto which the editing will be done.

JS
getCanvas(): Object
Returns:

Object

The respective DOM element. Could be an image or a canvas tag

getCanvasContext

Returns the 2d Context of the canvas element.

JS
getCanvasContext(): Object
Returns:

Object

The 2d canvas context.

getDataUrl

Returns a URL which could be used to visualize the image directly. The image is represented in Base64 format.

JS
getDataUrl(String mimeType): String
Parameters:mimeTypeString

The currently supported types are Image

Returns:

String

The string that represents an encoded URL containing the graphical data.

getImageDataAll

Returns an ImageData object containing the image data for the given rectangle of the bitmap.

JS
getImageDataAll(): Object
Returns:

Object

The ImageData object.

insertImage

Inserts image (clip art) into the editable image at the specified position

JS
insertImage(Number x, Number y, String value, Array operationsToApply): void
Parameters:xNumber

The X coordinate of the image

yNumber

The Y coordinate of the image

valueString

The client URL of the image to insert.

operationsToApplyArray

Array of operations to apply to the clip art image

isImageLoaded

Gets a flag whether the image is loaded.

JS
isImageLoaded(): Boolean
Returns:

Boolean

Is the image loaded flag.

isImageLoading

Gets a flag whether the image is loading

JS
isImageLoading(Object image): Boolean
Parameters:imageObject

The image to be edited.

Returns:

Boolean

Is the image loading flag

reset

Resets the changes to the current image and reverts it to the original one

JS
reset(Array imageUrl): void
Parameters:imageUrlArray

The original image url.

resize

Resizes the image.

JS
resize(Number width, Number height, Object imgOperation): void
Parameters:widthNumber

The new width of the image.

heightNumber

The new height of the image.

imgOperationObject

The image operation object handling the actual editing of the image.

rotate

Rotates the image in the specified direction.

JS
rotate(Telerik.Web.UI.ImageEditor.Rotation rotationDirection, Number angle, Object imgOperation): void
Parameters:rotationDirectionTelerik.Web.UI.ImageEditor.Rotation

Enum to determine the angle value. Only orthogonal values

angleNumber

The rotation angle.

imgOperationObject

The image operation object handling the actual editing of the image.

saveOnClient

Saves the image on the client machine.

JS
saveOnClient(Object fileName): void
Parameters:fileNameObject

The filename of the image. If file name is not a string

set_flipDirection

Sets the flip direction to the editable canvas.

JS
set_flipDirection(Telerik.Web.UI.ImageEditor.FlipDirection flipDirection): void
Parameters:flipDirectionTelerik.Web.UI.ImageEditor.FlipDirection

The direction of flipping.

zoom

Zooms(scales) the image by the specified level in percents. This operation does not change the image

JS
zoom(Number zoomLevel, Boolean forceZoom): void
Parameters:zoomLevelNumber

The level

forceZoomBoolean

Bool value indicating whether the zoom should be performed even if the current zoom level is the same.

Not finding the help you need?
Contact Support