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)

[Vian237]

I'm currently using version 1.2.4 and I still have the same problem. unlike your example, I receive the image url via an event and I'd like to replace it in the component. I've made the adjustments described above but the image is just replaced by the cropper box size. when I relaunch the component I get the real size of the image outside the component so it's impossible to work. Could you help me?

[MaxymGorn]

Hi @Vian237. Sorry, I'm fuzzy underhand your expectations. Could you provide more details about result of work? Maybe you want to see a complete reload of the component with the image replaced and centered according to the image dimensions, right?

[Vian237]

Hi @MaxymGorn the image is replaced but at the size of the cropper box previously used but when I reload the component the image seems not to be correctly replaced and not centered in the component. Yes, I think a complete reload of the component with the new image (dimensions and center) should help solve my problem. Because the idea is to be able to edit the image with the component.

[MaxymGorn]

@Vian237 just try to use this functionality:

Cropper.Blazor/src/Cropper.Blazor/Client/Pages/CropperDemo.razor.cs

Line 386 in da58751

{

Code:

string oldSrc = Src;

                Src = await CropperComponent!.GetImageUsingStreamingAsync(imageFile, imageFile.Size);

                IsAvailableInitCropper = true;
                IsErrorLoadImage = false;

                CropperComponent?.Destroy();
                CropperComponent?.RevokeObjectUrlAsync(oldSrc);

[MaxymGorn]

@Vian237 let me know if it work properly with this case!

[Vian237]

Hi @MaxymGorn I tried it before I came across this thread. In my context I receive the image directly as a string and so I can't use the "GetImageUsingStreamingAsync" method because I don't have an HTLM tag.

The problem I had with this code was that when the first image is received, the component behaves well, then when the 2nd is received, it displays all the images in a row. That's why I wanted to use the "Replace" method.

I think the "Destroy()" method doesn't work because maybe the image isn't updated in the component because I'm changing the source directly to the new image.

Here's what my code looks like:

[MaxymGorn]

@Vian237 Sure, the original src don't updated in case when you gathering replace image

[MaxymGorn]

Replace method shouldn't call Destroy method Blazor cropper component

[MaxymGorn]

I would investigate this point, how to center the image after replacing...

[MaxymGorn]

I'm currently using version 1.2.4 and I still have the same problem. unlike your example, I receive the image url via an event and I'd like to replace it in the component. I've made the adjustments described above but the image is just replaced by the cropper box size. when I relaunch the component I get the real size of the image outside the component so it's impossible to work. Could you help me?

Hi @Vian237.
Simple decision in your case:

Just set not required (hasSameSize) parameter to false.
In addition, you can try to use newest version of cropper NuGet - 1.2.7: https://www.nuget.org/packages/Cropper.Blazor/#versions-body-tab