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.
<div class="img-container"> <CropperComponent Class="big-img" Src="" ErrorLoadImageSrc="@_errorLoadImageSrc" ErrorLoadImageClass="cropper-error-load center" IsAvailableInitCropper="" 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); } }