Crop box dimensions - Cropper.Blazor

Basic dimensions settings

To set the initial dimensions of crop area (crop box), you can use the SetDataOptions property, which is located in the Options property of the cropper.

To resize the crop area of an already initialized cropper component you can use its SetData method.

Note: This method only available when the value of the ViewMode option is greater than or equal to 1.

Height and width of the crop area are based on the natural size of the original image.

Width

Height

@using Cropper.Blazor.Models;

<MudGrid>
    <MudItem xs="12" sm="8" md="9" lg="9">
        <MudPaper Class="pa-2">
            <div class="img-container">
                <CropperComponent Class="big-img" @ref="CropperComponent"
                                  Src="images/Rivne2.jpg" Options="CropperOptions" />
            </div>
        </MudPaper>
    </MudItem>
    <MudItem xs="12" sm="4" md="9" lg="3">
        <MudPaper Class="pa-2">
            <MudNumericField Class="mb-2" @bind-Value="CropBoxWidth" Label="Width" Step=".2M" Variant="Variant.Text"
                             Adornment="Adornment.End" AdornmentText="px" AdornmentColor="Color.Primary" Format="N4" />
            <MudNumericField Class="mb-2" @bind-Value="CropBoxHeight" Label="Height" Step=".2M" Variant="Variant.Text"
                             Adornment="Adornment.End" AdornmentText="px" AdornmentColor="Color.Primary" Format="N4" />
        </MudPaper>
    </MudItem>
</MudGrid>

@code {
    private CropperComponent? CropperComponent = null!;

    // Setting up initial dimensions of crop area
    private Options CropperOptions = new Options
    {
        SetDataOptions = new SetDataOptions
        {
            Width = 400,
            Height = 400,
        },
        ViewMode = ViewMode.Vm3
    };

    decimal _cropBoxWidth = 400;
    decimal _cropBoxHeight = 400;

    private decimal CropBoxWidth
    {
        get => _cropBoxWidth;
        set
        {
            _cropBoxWidth = value;
            CropperComponent!.SetData(new SetDataOptions
                {
                    Width = _cropBoxWidth,
                    Height = _cropBoxHeight
                });
            StateHasChanged();
        }
    }

    private decimal CropBoxHeight
    {
        get => _cropBoxHeight;
        set
        {
            _cropBoxHeight = value;
            CropperComponent!.SetData(new SetDataOptions
                {
                    Width = _cropBoxWidth,
                    Height = _cropBoxHeight
                });
            StateHasChanged();
        }
    }
}

<style>
    .big-img {
        max-height: 400px;
        /* This rule is very important, please don't ignore this */
        max-width: 100%;
    }

    .img-container {
        max-height: 400px;
        width: 100%;
    }
</style>

Min and Max dimensions

You can use the OnCropEvent to create a minimum and/or maximum limit for the size of the crop box. <CropperComponent> has a corresponding OnCropEvent shortcut.

This setting may not work with a specific aspect ratio. It is recommended to use a FREE aspect ratio for this option or calculate the valid values yourself.

@using Cropper.Blazor.Models;
@using Cropper.Blazor.Events;
@using Cropper.Blazor.Events.CropEvent;

<MudGrid>
    <MudItem xs="12" sm="8" md="8" lg="8">
        <MudPaper Class="pa-2">
            <div class="img-container">
                <CropperComponent Class="big-img" @ref="cropperComponent" Src="images/dolphin.jpg"
                                  Options="CropperOptions" OnCropEvent="OnCropEvent" />
            </div>
        </MudPaper>
    </MudItem>
    <MudItem xs="12" sm="4" md="4" lg="4">
        <MudPaper Class="pa-2">
            @if (currentCropperData != null)
            {
                // Current crop box data
                <MudNumericField ReadOnly="true" Class="mb-2" HideSpinButtons="true" @bind-Value="currentCropperData.X" Step=".2M" Label="X" Variant="Variant.Text"
                                 Adornment="Adornment.End" AdornmentText="px" AdornmentColor="Color.Primary" Margin="Margin.Dense" Format="N4" />
                <MudNumericField ReadOnly="true" Class="mb-2" HideSpinButtons="true" @bind-Value="currentCropperData.Y" Label="Y" Step=".2M" Variant="Variant.Text"
                                 Adornment="Adornment.End" AdornmentText="px" AdornmentColor="Color.Primary" Margin="Margin.Dense" Format="N4" />
                <MudNumericField ReadOnly="true" Class="mb-2" HideSpinButtons="true" @bind-Value="currentCropperData.Width" Label="Width" Step=".2M" Variant="Variant.Text"
                                 Adornment="Adornment.End" AdornmentText="px" AdornmentColor="Color.Primary" Margin="Margin.Dense" Format="N4" />
                <MudNumericField ReadOnly="true" Class="mb-2" HideSpinButtons="true" @bind-Value="currentCropperData.Height" Label="Height" Step=".2M" Variant="Variant.Text"
                                 Adornment="Adornment.End" AdornmentText="px" AdornmentColor="Color.Primary" Margin="Margin.Dense" Format="N4" />
            }
        </MudPaper>
    </MudItem>
</MudGrid>

@code {
    private CropperComponent? cropperComponent = null!;
    private CropperData currentCropperData = null!;

    // Minimum and maximum cropped dimensions settings
    private static decimal minCroppedWidth = 320;
    private static decimal minCroppedHeight = 160;
    private static decimal maxCroppedWidth = 640;
    private static decimal maxCroppedHeight = 320;

    private Options CropperOptions = new Options
    {
        SetDataOptions = new SetDataOptions
        {
            Width = (minCroppedWidth + maxCroppedWidth) / 2,
            Height = (minCroppedHeight + maxCroppedHeight) / 2
        },
        ViewMode = ViewMode.Vm3
    };

    public async void OnCropEvent(JSEventData<CropEvent> cropJSEvent)
    {
        await InvokeAsync(() =>
        {
            if (cropJSEvent?.Detail is not null)
            {
                decimal width = Math.Round(cropJSEvent.Detail.Width ?? 0);
                decimal height = Math.Round(cropJSEvent.Detail.Height ?? 0);

                if (width < minCroppedWidth || height < minCroppedHeight
                    || width > maxCroppedWidth || height > maxCroppedHeight)
                {
                    decimal nWidth = Math.Max(minCroppedWidth,
                        Math.Min(maxCroppedWidth, width));
                    decimal nHeight = Math.Max(minCroppedHeight,
                        Math.Min(maxCroppedHeight, height));

                    cropperComponent!.SetData(new SetDataOptions
                        {
                            Width = nWidth,
                            Height = nHeight
                        });
                }
                else
                {
                    currentCropperData = cropJSEvent.Detail;
                    StateHasChanged();
                }
            }
        });
    }
}

<style>
    .img-container {
        max-height: 400px;
        width: 100%;
    }
</style>

Minimum relative dimensions

Use the MinCropBoxHeight and MinCropBoxWidth fields in the Options cropper component property to enable minimum limit for the relative size of crop area

The MinCropBoxHeight and MinCropBoxWidth sizes is relative to the page, not the image.
Use the examples above to set up natural dimensions.

@using Cropper.Blazor.Models;
@using Cropper.Blazor.Events;
@using Cropper.Blazor.Events.CropEvent;

<MudPaper Class="img-container">
    <CropperComponent Class="big-img" @ref="cropperComponent" Src="images/Odesa.jpg"
                      Options="cropperOptions" />
</MudPaper>

@code {
    private CropperComponent? cropperComponent = null!;

    // Minimum relative sizes
    private static decimal minCropBoxWidth = 300;
    private static decimal minCropBoxHeight = 150;

    private Options cropperOptions = new Options
    {
        MinCropBoxWidth = minCropBoxWidth,
        MinCropBoxHeight = minCropBoxHeight,
        ViewMode = ViewMode.Vm3
    };
}

<style>
    .big-img {
        max-height: 400px;
        /* This rule is very important, please don't ignore this */
        max-width: 100%;
    }

    .img-container {
        max-height: 400px;
        width: 100%;
    }
</style>