Preview - Cropper.Blazor

Add Preview Option

With the Preview in Options prop you can add extra elements (containers) for preview. An element or an array of elements or a list ElementReference or a valid string selector for Document.querySelectorAll.

Notes for Preview Option:

The maximum width is the initial width of the preview container;

The maximum height is the initial height of the preview container;

If you set an AspectRatio option in Options, be sure to set the same aspect ratio to the preview container;

If the preview does not display correctly, set the overflow: hidden style to the preview container.

@using Cropper.Blazor.Components

<div class="img-container">
    <CropperComponent Class="cropper-example"
                      Src="cropperblazor.png"
                      Options="Options" />
div>
<div class="img-example-preview" />

<style>
    .cropper-example {
        max-height: 300px;
        width: 100%;
    }

    .img-example-preview {
        width: 100%;
        height: 300px;
        overflow: hidden;
    }

        .img-example-preview > ::deep img {
            max-width: 100%;
        }

style>

@code {
    private Cropper.Blazor.Models.Options Options = new Cropper.Blazor.Models.Options
    {
        Preview = ".img-example-preview"
    };
}

Cropper Preview

Add Preview Option