View Modes - Cropper.Blazor

Simple Usage

With the ViewMode in Options prop you can change the view mode of the cropper.

ViewMode enumeration contains the following view modes:

Vm0 - no restrictions;

Vm1 - restrict the crop box not to exceed the size of the canvas;

Vm2 - restrict the minimum canvas size to fit within the container. If the proportions of the canvas and the container differ, the minimum canvas will be surrounded by extra space in one of the dimensionss;

Vm3 - restrict the minimum canvas size to fill fit the container. If the proportions of the canvas and the container are different, the container will not be able to fit the whole canvas in one of the dimensions;

If you set ViewMode to ViewMode. Vm0, the crop box can extend outside the canvas, while a value of Vm1, Vm2, or Vm3 will restrict the crop box to the size of the canvas.

ViewMode of Vm2 or Vm3 will additionally restrict the canvas to the container.
There is no difference between Vm2 and Vm3 when the proportions of the canvas and the container are the same.

@using Cropper.Blazor.Models;

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

<MudButtonGroup Color="Color.Primary" Variant="Variant.Filled" OverrideStyles="false" Class="mud-width-full">
    <MudTooltip Text="View Mode 0" RootClass="mud-width-full">
        <MudButton OnClick="@(()=>SetViewMode(ViewMode.Vm0))" Color="Color.Primary" Variant="Variant.Filled" Class="ml-0"
                   Style="@(cropperOptions.ViewMode == ViewMode.Vm0 ? "background-color: var(--mud-palette-primary-darken)" : "")" FullWidth="true">
            VM0
        </MudButton>
    </MudTooltip>
    <MudTooltip Text="View Mode 1" RootClass="mud-width-full">
        <MudButton OnClick="@(()=>SetViewMode(ViewMode.Vm1))" Color="Color.Primary" Variant="Variant.Filled" Class="ml-0"
                   Style="@(cropperOptions.ViewMode == ViewMode.Vm1 ? "background-color: var(--mud-palette-primary-darken)" : "")" FullWidth="true">
            VM1
        </MudButton>
    </MudTooltip>
    <MudTooltip Text="View Mode 2" RootClass="mud-width-full">
        <MudButton OnClick="@(()=>SetViewMode(ViewMode.Vm2))" Color="Color.Primary" Variant="Variant.Filled" Class="ml-0"
                   Style="@(cropperOptions.ViewMode == ViewMode.Vm2 ? "background-color: var(--mud-palette-primary-darken)" : "")" FullWidth="true">
            VM2
        </MudButton>
    </MudTooltip>
    <MudTooltip Text="View Mode 3" RootClass="mud-width-full">
        <MudButton OnClick="@(()=>SetViewMode(ViewMode.Vm3))" Color="Color.Primary" Variant="Variant.Filled" Class="ml-0"
                   Style="@(cropperOptions.ViewMode == ViewMode.Vm3 ? "background-color: var(--mud-palette-primary-darken)" : "")" FullWidth="true">
            VM3
        </MudButton>
    </MudTooltip>
</MudButtonGroup>

@code {
    private CropperComponent? cropperComponent = null!;

    private Options cropperOptions = new Options
    {
        ViewMode = ViewMode.Vm3
    };

    public void SetViewMode(ViewMode viewMode)
    {
        cropperOptions.ViewMode = viewMode;
        cropperComponent?.Destroy();
        cropperComponent?.InitCropper();
    }
}

<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>