Blazorise Cropper API

Explore the Blazorise Cropper API reference for parameters, events, methods, and related types.

For examples and usage guidance, see the Cropper documentation.

API

Parameters

Cropper

Parameter Description TypeDefault
Alt

The alt text of the image.

string
CropperState

Provides the shared state and synchronization context between the cropper and cropper viewer.

CropperStatenull
CrossOrigin

The cross-origin attribute of the image.

string
Enabled

Enables or disables cropper interactions.

booltrue
GridOptions

Defines the grid overlay drawn inside the crop selection.

CropperGridOptionsnew CropperGridOptions()
ImageOptions

Controls which image transform operations are available.

CropperImageOptionsnew CropperImageOptions()
SelectionOptions

Defines the behavior and initial shape of the crop selection.

CropperSelectionOptionsnew CropperSelectionOptions()
ShowBackground

Shows the grid background behind the cropper.

booltrue
Source

The source of the image.

string

CropperViewer

Parameter Description TypeDefault
CropperState

Provides the shared state and synchronization context between the cropper and cropper viewer.

CropperStatenull

CropperCropOptions

Parameter Description TypeDefault
Height

Output canvas height in pixels.

int0
ImageQuality

Compression quality for lossy formats, from 0 to 1.

Remarks

A user agent will use its default quality value if this option is not specified, or if the number is outside the allowed range.

double?1d
ImageType

MIME type for the encoded cropped image. Defaults to image/png.

string"image/png"
Width

Output canvas width in pixels.

int0

CropperImageOptions

Parameter Description TypeDefault
Rotatable

Rotation commands can change the image angle.

booltrue
Scalable

Scale commands can resize the image on the X or Y axis.

booltrue
Skewable

Skew commands can slant the image horizontally or vertically.

boolfalse
Translatable

Move commands can reposition the image within the cropper.

booltrue

CropperSelectionOptions

Parameter Description TypeDefault
AspectRatio

Fixed ratio maintained while resizing the selection.

CropperAspectRatioCropperAspectRatio.Is1x1
InitialAspectRatio

Ratio used for the selection created during initialization.

CropperAspectRatioCropperAspectRatio.Is1x1
InitialCoverage

Fraction of the image covered by the initial selection, from 0 to 1.

double?null
Keyboard

Keyboard input can move or resize the active selection.

booltrue
Movable

The selection can be dragged to a new position.

booltrue
Outlined

The selection renders with a visible outline.

booltrue
Resizable

Selection edges and handles can change its size.

booltrue
Zoomable

Mouse wheel or gesture zoom can be applied from the selection.

booltrue

CropperGridOptions

Parameter Description TypeDefault
Bordered

The grid renders border lines around its cells.

booltrue
Columns

Number of vertical grid divisions.

int3
Covered

The grid fills the full selection area.

booltrue
Rows

Number of horizontal grid divisions.

int3

Events

Cropper

Event Description Type
CropEnded

This event fires when the canvas (image wrapper) or the crop box stops changing.

Func<Task>
CropMoved

This event fires when the canvas (image wrapper) or the crop box is changing.

Func<Task>
Cropped

This event fires when the canvas (image wrapper) or the crop box changes.

Func<CropperCroppedEventArgs, Task>
CropStarted

This event fires when the canvas (image wrapper) or the crop box starts to change.

Func<Task>
ImageLoadingFailed

This event fires when the image cannot be loaded. Usually because of 404 or Source being null. Returns an error message as a parameter.

Func<string, Task>
ImageReady

This event fires when the image is ready / loaded.

Func<Task>
SelectionChanged

The event is fired when the position or size of the selection is going to change.

Func<CropperSelectionChangedEventArgs, Task>
Zoomed

This event fires when a cropper instance starts to zoom in or zoom out its canvas (image wrapper).

Func<CropperZoomedEventArgs, Task>

Methods

Cropper

Method DescriptionReturnParameters
Center Center the image. ValueTaskstring size
CropAsBase64ImageAsync Get the cropped image as Base64 image. ValueTask<string>CropperCropOptions options
MoveTo Moves the image to a specific position. ValueTaskint x, int y
Move Moves the image. ValueTaskint x, int y
ResetSelection Resets the selection to its initial position and size. ValueTask
Rotate Rotates the image. ValueTaskdouble angle
Scale Scale the image. ValueTaskint x, int y
Zoom Zooms the image. ValueTaskdouble scale
On this page