Blazorise Cropper component

A component used to crop images.

When building an application, best practice requires reducing an image's surrounding noise and directing a user's attention to a specific part of the image. Image cropping is a method for manipulating images to remove any unwanted elements. By changing the aspect ratio or orientation, we can draw viewers' eyes to the photograph's primary subject and improve the overall composition. This applies to profile pictures or uploading images with specific dimensions.

The new Cropper component handles all of that. You can upload an image and then select part of it, rotate, scale, and crop it. You can also add a preview by adding a CropperViewer whenever on a page, and it will automatically synchronize with the latest selection.

Installation

NuGet

Install extension from NuGet.

Install-Package Blazorise.Cropper

Imports

In your main _Imports.razor add:

@using Blazorise.Cropper

Message Size

This step is recommended for Blazor Server only. In a default Blazor Server project template, the SignalR settings might be too small for some components like Cropper. To make it work, you should increase the MaximumReceiveMessageSize in your projects Startup.cs.

.AddHubOptions(o =>
{
    o.MaximumReceiveMessageSize = 1024 * 1024 * 100;
})

Examples

Basic

The image cropper is pretty straightforward. You need to define a Source parameter, and a reference.

Image Cropper

<Row>
    <Column>
        <FieldLabel>
            Image Cropper
        </FieldLabel>
        <FieldBody>
            <Cropper @ref="cropper" Source="img/gallery/6.jpg" SelectionChanged="@OnSelectionChanged" Style="aspect-ratio: 16 / 9; height: 100%;" />
        </FieldBody>
    </Column>
    <Column>
        <Div Margin="Margin.Is2.FromBottom">
            <Button Color="Color.Primary" Clicked="@GetCroppedImage" Disabled="@cropButtonDisabled">Get Cropped Image</Button>
            <Button Color="Color.Secondary" Clicked="@ResetSelection" Disabled="@cropButtonDisabled">Reset Selection</Button>
        </Div>
        <Image Source="@result" Border="Border.Is1" Style="width: 250px; height: 250px;" />
    </Column>
</Row>

@code {
    private Cropper cropper;
    private string result;
    private bool cropButtonDisabled = true;

    private Task OnSelectionChanged( CropperSelectionChangedEventArgs eventArgs )
    {
        if ( eventArgs.Width != 0 )
        {
            cropButtonDisabled = false;

            return InvokeAsync( StateHasChanged );
        }

        return Task.CompletedTask;
    }

    private async Task GetCroppedImage()
    {
        result = await cropper.CropAsBase64ImageAsync( new() { Width = 250, Height = 250 } );
    }

    private async Task ResetSelection()
    {
        cropButtonDisabled = true;

        await cropper.ResetSelection();
    }
}

Viewer

To add a preview support you can use a <CropperViewer> component. Once added you need to connect it to a <Cropper> by assigning the CropperState parameter. This parameter is used as a synchronization context bewteen the cropper and a viewer.

Image Cropper

Preview

<Row>
    <Column>
        <FieldLabel>
            Image Cropper
        </FieldLabel>
        <FieldBody>
            <Cropper Source="img/gallery/3.jpg" CropperState="@cropperState" />
        </FieldBody>
    </Column>
    <Column>
        <FieldLabel>
            Preview
        </FieldLabel>
        <FieldBody>
            <CropperViewer CropperState="@cropperState" Margin="Margin.Is2.FromBottom" Style="width: 150px; height: 150px;" />
            <CropperViewer CropperState="@cropperState" Margin="Margin.Is2.FromBottom" Style="width: 100px; height: 100px;" />
            <CropperViewer CropperState="@cropperState" Margin="Margin.Is2.FromBottom" Style="width: 50px; height: 50px;" />
        </FieldBody>
    </Column>
</Row>

@code {
    private CropperState cropperState = new();
}

API

Attributes

Cropper

Name	Description	Type	Default
`Ratio`	Defines the aspect ratio of the image cropper.	`CropperAspectRatio`	`Is1x1`
`Source`	The original image source.	`string`	`null`
`Alt`	The alt text of the image.	`string`	`null`
`CropStarted`	This event fires when the canvas (image wrapper) or the crop box starts to change.	`EventCallback`
`CropMoved`	This event fires when the canvas (image wrapper) or the crop box is changing.	`EventCallback`
`CropEnded`	This event fires when the canvas (image wrapper) or the crop box stops changing.	`EventCallback`
`Cropped`	This event fires when the canvas (image wrapper) or the crop box changes.	`EventCallback`
`Zoomed`	This event fires when a cropper instance starts to zoom in or zoom out its canvas (image wrapper).	`EventCallback`
`Enabled`	Is the cropper enabled.	`bool`	`true`
`CropperState`	Provides a shared state and syncronization context between the cropper and cropper viewer.	`CropperState`	`null`
`CrossOrigin`	The cross-origin attribute of the image.	`string`	`null`
`ImageReady`	This event fires when the image is ready / loaded.	`Func<Task>`	`null`

CropperViewer

Name	Description	Type	Default
`CropperState`	Provides a shared state and syncronization context between the cropper and cropper viewer.	`CropperState`

CropperCropOptions

Name	Description	Type	Default
`Width`	The destination width of the output canvas.	`int`	`0`
`Height`	The destination height of the output canvas.	`int`	`0`
`ImageType`	A string indicating the image format. The default type is `image/png` this image format will be also used if the specified type is not supported.	`string`	`image/png`
`ImageQuality`	A Number between 0 and 1 indicating the image quality to be used when creating images using file formats that support lossy compression (such as image/jpeg or image/webp).	`double?`	`1.0`