Crop multiple image in 1 componnent

[NguyenQuocVuong-git]

I have an issue where I need to use the 'replace' function from the CropperJS library, but I haven't been able to call it

It's throwing an error : Cannot set property 'src' of undefined

my code : cropper.replace("image.png,", true);

If you have any alternative solutions, please support me

[chengpeiquan]

Sorry, I seem to have forgotten to remind in the document, the default value of cropper is null before initialization (Initialization will be performed when props.img changes).

So, needs to be judged when using:

if (cropper) {
  // do something
}

I will add it to the document later.

[NguyenQuocVuong-git]

I did change my code but the error still occurs,

my code :

My case occurred when I had more than one set of image crop selectors. It seems that after each cropping, the tool does not destroy the old data. When a new cropping set is opened, it cannot replace the previous data. I read about this case in the CropperJS documentation, and the method they suggested is to replace, but your current library seems unable to use this function.

Do you have another way?

[chengpeiquan]

I'm not sure what the context is for this problem. If you have time, can you provide a minimally reproducible repository for me to take a look at?

This is an example of multiple cropping boxes on the page, Please check if it meets the needs? https://cropper.chengpeiquan.com/multiple-cropper.html

Source code see: MultipleCropper.vue .

Btw: Inside the component of this plugin, when props.img changes, cropper.replace will be automatically triggered. Generally, there is no need to actively handle it.

[NguyenQuocVuong-git]

It has a similar case here, you can take a look. But I still hope that your library can solve this issue because it is user-friendly for Vue3 users like me

https://stackoverflow.com/questions/75094929/vue-cropperjs-is-not-refreshing-when-adding-new-photo

[chengpeiquan]

Hi, I added a paragraph of explanation in my previous reply.

Btw: Inside the component of this plugin, when props.img changes, cropper.replace will be automatically triggered. Generally, there is no need to actively handle it.

The problem in the description of this Stackoverflow question, this plugin is handled.

if i'm trying to upload other image, the cropper doesn't refresh.

Can you access the live demos on my documentation? Does this exception appear in the demo?

[NguyenQuocVuong-git]

Can I contact you directly (via email, Facebook, Discord)? There are some details that cannot be made public, but if my issue is resolved, I will explain why I encountered this problem.

[chengpeiquan]

Can I contact you directly (via email, Facebook, Discord)? There are some details that cannot be made public, but if my issue is resolved, I will explain why I encountered this problem.

Yeah, my email is chengpeiquan@chengpeiquan.com , I will keep your example confidential, but it is generally not recommended to provide commercial confidential information. Please try to provide the smallest implementation that can simply reproduce the problem.

[NguyenQuocVuong-git]

yeah, i did send email to you, pls read it :D

Vào Th 4, 8 thg 5, 2024 vào lúc 10:49 chengpeiquan < @.***> đã viết:

Can I contact you directly (via email, Facebook, Discord)? There are some details that cannot be made public, but if my issue is resolved, I will explain why I encountered this problem.

Yeah, my email is @.*** , I will keep your example confidential, but it is generally not recommended to provide commercial confidential information. Please try to provide the smallest implementation that can simply reproduce the problem.

— Reply to this email directly, view it on GitHub https://github.com/chengpeiquan/vue-picture-cropper/issues/38#issuecomment-2099686763, or unsubscribe https://github.com/notifications/unsubscribe-auth/ARVCLVWGJNIEL2H2GEEOSFTZBGOFJAVCNFSM6AAAAABHKWY77KVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAOJZGY4DMNZWGM . You are receiving this because you authored the thread.Message ID: @.***>

[chengpeiquan]

Hi, my emails carrying zip files keep being bounced, please see this example repo.

https://github.com/chengpeiquan/vpc-multiple-example

[chengpeiquan]

Hi, my emails carrying zip files keep being bounced, please see this example repo.

https://github.com/chengpeiquan/vpc-multiple-example

https://github.com/chengpeiquan/vue-picture-cropper/assets/24845958/8d6ecb5c-037d-4cdd-bc25-8b365878b569

[NguyenQuocVuong-git]

I've looked through the code, and our code is similar, except that each time I click on the camera icon, I capture an image from devices and pass a base64 string into img . Do you think this could be causing the error?

[chengpeiquan]

I've looked through the code, and our code is similar, except that each time I click on the camera icon, I capture an image from devices and pass a base64 string into img . Do you think this could be causing the error?

It has nothing to do with base64 (you can change the preview results on the example). The exception should be caused by the Cropper instance being confused. The core of the example is to maintain its independence through component isolation.

[NguyenQuocVuong-git]

It's really puzzling. I still don't understand why I'm encountering the error while we both wrote the code following the same solution :(

[chengpeiquan]

It's really puzzling. I still don't understand why I'm encountering the error while we both wrote the code following the same solution :(

Try to use v-if to destroy the component containing the cropper instance when rendering is not needed, and only render it when needed.

[NguyenQuocVuong-git]

I did try it (v-show, v-if...). But the error still happen

[github-robots]

This issue has been automatically closed since there has not been any recent activity after it was created. Please open a new issue for related bugs.

由于该 issue 创建后没有任何近期活动，因此已被自动关闭，请针对相关问题打开一个新 issue 。