Rebuild cropper component - Cropper.Blazor

Simple Usage

With changing Src in CropperComponent component you can replace the image's src and rebuild the cropper when call Destroy method for cropper component.

Call RevokeObjectUrlAsync method when you've finished using an object URL to let the browser know not to keep the reference to the file any longer.

<div class="img-container">
    <CropperComponent Class="big-img"
                      Src="@src"
                      ErrorLoadImageSrc="@_errorLoadImageSrc"
                      ErrorLoadImageClass="cropper-error-load center"
                      IsAvailableInitCropper="@IsAvailableInitCropper"
                      IsErrorLoadImage="@IsErrorLoadImage"
                      OnErrorLoadImageEvent="OnErrorLoadImageEvent"
                      @ref="cropperComponent"
                      Options="new Blazor.Models.Options()" />
div>

<InputFile id="imageRebuildInput" OnChange="RebuildImageAsync" accept="image/*" />

@* Make sure the size of the image fits perfectly into the container *@
<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%;
    }

    /* These styles are just needed for a nice button and don't related with cropper component */
    #imageRebuildInput {
        display: inline-block;
        padding: 10px 20px;
        background-color: #007bff;
        color: #fff;
        border: none;
        border-radius: 5px;
        text-align: center;
        text-decoration: none;
        font-size: 16px;
        cursor: pointer;
    }

    .cropper-error-load {
        max-height: inherit;
        max-width: 100%;
    }

    .center {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
style>

@code {
    private readonly string _errorLoadImageSrc = "not-found-image.jpg";
    private bool IsErrorLoadImage { get; set; } = false;
    private bool IsAvailableInitCropper { get; set; } = true;
    private string src = "images/underwater-magic-world.jpeg";
    private CropperComponent? cropperComponent = null!;

    public async Task RebuildImageAsync(InputFileChangeEventArgs inputFileChangeEventArgs)
    {
        IBrowserFile imageFile = inputFileChangeEventArgs.File;

        if (imageFile != null)
        {
            string oldSrc = src;

            src = await cropperComponent!.GetImageUsingStreamingAsync(imageFile, imageFile.Size);

            IsAvailableInitCropper = true;
            IsErrorLoadImage = false;

            cropperComponent?.Destroy();
            cropperComponent?.RevokeObjectUrlAsync(oldSrc);
        }
    }

    public void OnErrorLoadImageEvent(ErrorEventArgs errorEventArgs)
    {
        IsErrorLoadImage = true;
        Destroy();
        StateHasChanged();
    }

    private void Destroy()
    {
        cropperComponent?.Destroy();
        cropperComponent?.RevokeObjectUrlAsync(src);
    }
}