Aspect Ratio - Cropper.Blazor

Q&A

How to fix the aspect ratio in free ratio mode?

Just hold the Shift key when you resize the crop box.

How to crop a square area in free ratio mode?

Just hold the Shift key when you crop on the image.

Basic setup

You can use AspectRatio decimal field in the Options property to define the fixed aspect ratio of the crop box.

To enable free aspect ratio setting AspectRatio propety to 0.

Note: By default, the crop box has a free ratio.

@using Cropper.Blazor.Models;

<div class="img-container">
    <CropperComponent Class="big-img" Options="cropperOptions"
                      Src="images/dolphin.jpg" />
</div>

@code {
    private Options cropperOptions = new Options
    {
        AspectRatio = (decimal)16 / 9,
        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;
        max-width: 800px;
    }
</style>

Change aspect ratio

You can change the aspect ratio of initialized cropper with the SetAspectRatio method.

px

Width

px

Height

@using Cropper.Blazor.Models;

<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/Rivne2.jpg" Options="cropperOptions" />
            </div>
        </MudPaper>
    </MudItem>
    <MudItem xs="12" sm="4" md="4" lg="4">
        <MudPaper Class="pa-2">
            <MudNumericField Class="mb-2" @bind-Value="CropBoxWidth" Label="Width" Step="100M" Variant="Variant.Text" Min="1"
                             Adornment="Adornment.End" AdornmentText="px" AdornmentColor="Color.Primary" Format="N4" />
            <MudNumericField Class="mb-2" @bind-Value="CropBoxHeight" Label="Height" Step="100M" Variant="Variant.Text" Min="1"
                             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
    {
        AspectRatio = 1m,
        ViewMode = ViewMode.Vm3
    };

    decimal _cropBoxWidth = 400;
    decimal _cropBoxHeight = 400;

    private decimal CropBoxWidth
    {
        get => _cropBoxWidth;
        set
        {
            _cropBoxWidth = value;
            cropperComponent!.SetAspectRatio(value / _cropBoxHeight);
            StateHasChanged();
        }
    }

    private decimal CropBoxHeight
    {
        get => _cropBoxHeight;
        set
        {
            _cropBoxHeight = value;
            cropperComponent!.SetAspectRatio(_cropBoxWidth / value);
            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;
        max-width: 100%;
    }
</style>

Initial aspect ratio

Use InitialAspectRatio in the Options cropper component property to define the initial aspect ratio of the crop box.

By default, it is the same as the aspect ratio of the canvas (image wrapper).

Only available when the AspectRatio option is set to 0 (free ratio).

@using Cropper.Blazor.Models;

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

@code {
    private CropperComponent? cropperComponent = null!;

    private Options cropperOptions = new Options
    {
        InitialAspectRatio = (decimal)1,
        AspectRatio = 0,
        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;
        max-width: 800px;
    }
</style>

Min & Max aspect ratio

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

Only available when the AspectRatio option is set to 0 (free ratio).

Min aspect ratio

Max aspect ratio

Current aspect ratio:

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

<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/Odesa.jpg"
                                  Options="cropperOptions" OnCropMoveEvent="OnCropMoveEvent" />
            </div>
        </MudPaper>
    </MudItem>
    <MudItem xs="12" sm="4" md="4" lg="4">
        <MudPaper Class="pa-2">
            <MudNumericField Class="mb-2" @bind-Value="minAspectRatio" Label="Min aspect ratio"
                             ReadOnly="true" HideSpinButtons="true">
            </MudNumericField>
            <MudNumericField Class="mb-2" @bind-Value="maxAspectRatio" Label="Max aspect ratio"
                             ReadOnly="true" HideSpinButtons="true">
            </MudNumericField>
            <div class="d-flex gap-x-6 align-end mb-2">
                <MudChip T="string" Variant="Variant.Outlined" Color="Color.Primary" Class="flex-1 ma-0 mt-4">
                    Current aspect ratio:
                </MudChip>
                <MudNumericField @bind-Value="CurrentAspectRatio" Format="N4" Variant="Variant.Text"
                                 HideSpinButtons="true" ReadOnly="true" Class="flex-1" />
            </div>
        </MudPaper>
    </MudItem>
</MudGrid>

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

    // Minimum and maximum aspect ratio settings
    private static decimal? minAspectRatio = 1;
    private static decimal? maxAspectRatio = 2;

    public decimal CurrentAspectRatio { get; set; } = 1;

    private Options cropperOptions = new Options
    {
        InitialAspectRatio = (decimal)1,
        AspectRatio = 0,
        ViewMode = ViewMode.Vm3
    };

    public async void OnCropMoveEvent(JSEventData<CropMoveEvent> cropMoveJSEvent)
    {
        CropBoxData cropBoxData = await cropperComponent!.GetCropBoxDataAsync();

        if (cropBoxData.Height != 0)
        {
            CurrentAspectRatio = cropBoxData.Width / cropBoxData.Height;

            if (minAspectRatio is not null || maxAspectRatio is not null)
            {
                if (CurrentAspectRatio < minAspectRatio)
                {
                    cropperComponent!.SetCropBoxData(new SetCropBoxDataOptions
                        {
                            Width = cropBoxData.Height * minAspectRatio
                        });
                }
                else if (CurrentAspectRatio > maxAspectRatio)
                {
                    cropperComponent!.SetCropBoxData(new SetCropBoxDataOptions
                        {
                            Width = cropBoxData.Height * maxAspectRatio
                        });
                }
            }
        }
        else
        {
            CurrentAspectRatio = 0;
        }
        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;
        max-width: 100%;
    }
</style>