Dynamically Change Image in Cropper Element

[HasanAnsar]

How I can dynamically change image in cropper element through components parameter?

[MaxymGorn]

You can see that functionality in demo site: https://cropperblazor.github.io/demo

Example code:

1. UI - https://github.com/CropperBlazor/Cropper.Blazor/blob/dev/src/Cropper.Blazor/Client/Pages/CropperDemo.razor#L130

2. https://github.com/CropperBlazor/Cropper.Blazor/blob/dev/src/Cropper.Blazor/Client/Pages/CropperDemo.razor.cs#L327

[HasanAnsar]

it's changing through Browse but i have url's of image that appears conditionally how to change image through URL not browsing

[MaxymGorn]

I'm accidently missed that's functionality, as result I opened PR: #151, #152

[MaxymGorn]

You can use replace function, for instance:
await CropperComponent?.ReplaceAsync("your url", true);

[HasanAnsar]

There is nothing Function like ReplaceAsync have you added it now?

[MaxymGorn]

It was already in the cropper js service, but it was not added to the cropper component

[MaxymGorn]

You can use the new version of the package right now!

[MaxymGorn]

I'm sorry, but unfortunately, after replacing the image, the functions become dead for some reason, me need to find out what's going wrong

[MaxymGorn]

Hi @HasanAnsar . Now, in package version 1.2.2 it should work.

Example:

1. You need include "IsAvaibleInitCropper" property as true

2. When you wanna change image in cropper dynamically, you can use that method:

IsAvaibleInitCropper = false; // ReplaceAsync call on ready event, after that we have double initialization cropper, as result we need block that. You can unblock this property when it demand on for destroy and full re-creation component.
CropperComponent?.ReplaceAsync(src);
CropperComponent?.RevokeObjectUrlAsync(oldSrc);

In addition, if you use error handling code should likewise that:

                if (IsErrorLoadImage)
                {
                    IsAvaibleInitCropper = true;
                    IsErrorLoadImage = false;
                }
                else
                {
                    IsAvaibleInitCropper = false;
                }

                CropperComponent?.ReplaceAsync(src);
                CropperComponent?.RevokeObjectUrlAsync(oldSrc);

Don't forget to setup OnErrorLoadImageEvent event if you use that approach (You can see a sample in the cropper demo resources)