Blazorise icon indicating copy to clipboard operation
Blazorise copied to clipboard

[Bug]: Cropper does not display base64 image sources

Open Brutiquzz opened this issue 1 year ago • 0 comments

Blazorise Version

1.4.2

What Blazorise provider are you running on?

Bootstrap5

Link to minimal reproduction, or a simple code snippet

@using System.IO

 <Column>
     <FieldLabel>
        <FileEdit Changed="@OnChanged" />
     </FieldLabel>
     <FieldBody>
         <Cropper @ref="cropper" Source="ImageSource" SelectionChanged="@OnSelectionChanged" Style="aspect-ratio: 16 / 9; height: 100%;" />
     </FieldBody>
 </Column>
 <Column>
     <Div Margin="Margin.Is2.FromBottom">
         <Button Color="Color.Primary" Clicked="@GetCroppedImage" Disabled="@cropButtonDisabled">Get Cropped Image</Button>
         <Button Color="Color.Secondary" Clicked="@ResetSelection" Disabled="@cropButtonDisabled">Reset Selection</Button>
     </Div>
     <Image Source="@ImageSource" Border="Border.Is1" />
 </Column>

@code {

    public string ImageSource { get; set; } = string.Empty;
    private Cropper cropper = new();
    private string result = string.Empty;
    private bool cropButtonDisabled = true;

    async Task OnChanged(FileChangedEventArgs e)
    {
        byte[] bytes;
        using (MemoryStream result = new MemoryStream())
        {
            await e.Files.First().OpenReadStream(long.MaxValue).CopyToAsync(result);
            bytes = result.ToArray();
        }
        ImageSource = $"data:{e.Files.First().Type};base64, {Convert.ToBase64String(bytes)}";

        StateHasChanged();
    }

    private Task OnSelectionChanged(CropperSelectionChangedEventArgs eventArgs)
    {
        if (eventArgs.Width != 0)
        {
            cropButtonDisabled = false;

            return InvokeAsync(StateHasChanged);
        }

        return Task.CompletedTask;
    }

    private async Task GetCroppedImage()
    {
        result = await cropper.CropAsBase64ImageAsync(new() { Width = 250, Height = 250 });
    }

    private async Task ResetSelection()
    {
        cropButtonDisabled = true;

        await cropper.ResetSelection();
    }
}

Steps to reproduce

Upload an image using the FileEdit component

What is expected?

I expect the Cropper component to display the image I upload through the FileEdit component.

What is actually happening?

Nothing is happening to the cropper component. But the Image component also present in the code updates correctly and displays the uploaded image.

What browsers are you seeing the problem on?

Chrome, Microsoft Edge

Any additional comments?

It is not clear from the documentation if the Source of the cropper allows for base64 inputs or not.

If i use a static file from wwwroot then the cropper works.

Brutiquzz avatar Feb 18 '24 20:02 Brutiquzz