@code
{
    private bool IsErrorLoadImage { get; set; } = false;

    public void OnErrorLoadImageEvent(ErrorEventArgs errorEventArgs)
    {
        // You can use 'ErrorLoadImageContent' instead of 'ErrorLoadImageSrc', 'ErrorLoadImageClass'
        // parameters in cropper component to set up custom error image content
        IsErrorLoadImage = true;
        StateHasChanged();
    }
}

<style>
    .error-image {
        filter: grayscale(100%);
    }
</style>

@code {
    private Options options;

    public Dictionary<string, object> InputAttributes { get; set; } = new Dictionary<string, object>
    {
        { "crossorigin", "anonymous" } // Another possible values: "use-credentials" or "" (the same as "anonymous"). An invalid keyword and an empty string will be handled as the anonymous keyword. For more information see official https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin documentation
    };

    protected override void OnInitialized()
    {
        options = new Options
        {

        };
    }
}

@code {
    [Inject] private IJSRuntime? JSRuntime { get; set; }

    private CropperComponent? cropperComponent = null!;
    private Options options;
    private bool IsErrorLoadImage { get; set; } = false;

    public Dictionary<string, object> InputAttributes { get; set; } = new Dictionary<string, object>
    {
        { "id", "canvas-cropper" }
    };

    protected override void OnInitialized()
    {
        options = new Options
        {

        };
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // When using CropperComponentType.Canvas, the canvas element is used directly
            // instead of an <img> tag. This requires manually drawing or uploading an image
            // into the <canvas> element via JavaScript or library. Error handling (e.g., for failed image
            // loading) is also your responsibility in this case.
            // This approach is ideal when you’re building a drawing, painting, or image editing
            // tool where you need full control over the canvas content.
            ElementReference? canvasElementReference = cropperComponent!.GetCropperElementReference();

            // Example: Fill the canvas with random colors using JavaScript
            await JSRuntime!.InvokeVoidAsync(
                "fillCanvasWithRandomColors",
                canvasElementReference);

            // Initialize the cropper component after the canvas is ready
            cropperComponent.InitCropper();
        }

        await base.OnAfterRenderAsync(firstRender);
    }

    public void SetError()
    {
        // You can use 'ErrorLoadImageContent' instead of 'ErrorLoadImageSrc', 'ErrorLoadImageClass'
        // parameters in cropper component to set up custom error image content
        IsErrorLoadImage = true;
        cropperComponent!.Destroy();
    }
}