react-advanced-cropper icon indicating copy to clipboard operation
react-advanced-cropper copied to clipboard

How to change the image to the stencil view?

Open hamidihekmat opened this issue 2 years ago • 16 comments

Hi there,

I'm trying to set change the image to the stencil view without having to use cropper.getCanvas().toDataURL() In a way I want the cropper to zoom in to the stencil view port. Is this possible, if yes, how do I accomplish this?

Thanks

hamidihekmat avatar Oct 07 '22 02:10 hamidihekmat

I guess what I want to do it, resize the image to the stencil view

hamidihekmat avatar Oct 07 '22 03:10 hamidihekmat

@hamidihekmat, frankly, I didn't understand what do you want to achieve. Could you give some examples or draw the image of the desired result?

Norserium avatar Oct 07 '22 07:10 Norserium

https://user-images.githubusercontent.com/47622106/194614560-1a8179e2-0360-46b2-9ea7-c50e1fcd7b12.mp4

Okay so when you click on the crop, on save I want the the other view to change to the cropped view without having to convert the image to base64 and changing the image src, in a way I want the image to resize to the crop view

hamidihekmat avatar Oct 07 '22 17:10 hamidihekmat

And also is there way to remove the black background, I tried to set it to transparent but it's shows as grey transparent

hamidihekmat avatar Oct 07 '22 17:10 hamidihekmat

@hamidihekmat, well it's the interesting request.

If I understood you correctly, I have never seen croppers like you want to get. Could you try this example (the bottom one) and tell me how close is it to the desired cropper.

And also is there way to remove the black background, I tried to set it to transparent but it's shows as grey transparent

It's not the gray background, it's the overlay around stencil.

Norserium avatar Oct 21 '22 20:10 Norserium

@Norserium that's perfect, where can I get the code from?

hamidihekmat avatar Oct 21 '22 20:10 hamidihekmat

@hamidihekmat, well, it's not ready now, because it depends on the new unreleased features.

When I release the new version I will give you link to the source code. But I warn you:

  • the code is complicated
  • you have to fix react-advanced-cropper version, because the code depends on the parts that can be easily changed during the beta testing

So, how urgent is it?

In any case, test it carefully. If you want some changes in the current behavior tell me, I will look what I can do.

Norserium avatar Oct 21 '22 20:10 Norserium

for now it's perfect, it's kinda urgent but from the looks of it you did a really nice job. I'm amazed! I'll just wait when it's fully implemented. Then ill take the example and change the styles to chakra. ui. Thank you!

hamidihekmat avatar Oct 21 '22 21:10 hamidihekmat

@hamidihekmat, very well. I will try to find time on the weekend.

Norserium avatar Oct 21 '22 21:10 Norserium

@Norserium enjoy your weekend man and no rush. Thanks again :)

hamidihekmat avatar Oct 21 '22 21:10 hamidihekmat

@hamidihekmat, the new features are released in 0.14.0. The source code is available here.

Don't you mind to add your result to the showcase page when it will be ready? If you don't mind, send me the final result to integrate it to documentation.

Norserium avatar Oct 22 '22 23:10 Norserium

I found a bug, the aspect ration doesn't change once you crop the image and then rotate it. Otherwise it looks great!

https://user-images.githubusercontent.com/47622106/197438581-a4d2fa3e-0fa5-4f94-b7b0-dee776b2df40.mov

hamidihekmat avatar Oct 24 '22 02:10 hamidihekmat

I image rotates but the stencil stays on the same coordinates, the default full image rotation should look like the cropped image rotation

hamidihekmat avatar Oct 24 '22 02:10 hamidihekmat

I found a bug, the aspect ration doesn't change once you crop the image and then rotate it.

That's not a bug, it's the default cropper behavior. Although, it's possible to redefine it.

I image rotates but the stencil stays on the same coordinates, the default full image rotation should look like the cropped image rotation

I didn't get, what's need to do?

Norserium avatar Oct 24 '22 08:10 Norserium

@Norserium you see how in default view when you rotate the image rotates with the aspect ratio, if it's 16/9 then rotating 90deg will turn the image to 9/16. I would to have this feature when rotating cropped area , is this possible?

hamidihekmat avatar Oct 25 '22 06:10 hamidihekmat

@hamidihekmat, there you are.

Norserium avatar Oct 25 '22 09:10 Norserium

@hamidihekmat, any news?

Norserium avatar Oct 28 '22 23:10 Norserium

@hamidihekmat, any news?

Norserium avatar Nov 07 '22 15:11 Norserium

@hamidihekmat, any news?

Norserium avatar Nov 16 '22 23:11 Norserium

@Norserium hey sorry (long busy work weeks), I was working on writing tests for it and making sure it worked perfectly for my use case. I used context api to store the cropper ref and used it to decouple cropper controls. Aside from that everything else is working perfectly fine. Thanks for all your work! You wanted to use this for showcase?

hamidihekmat avatar Nov 16 '22 23:11 hamidihekmat

@hamidihekmat, it's great!

You wanted to use this for showcase?

Yes, that would be great. It was a tricky case.

Norserium avatar Nov 16 '22 23:11 Norserium

@hamidihekmat, is your project public available?

Norserium avatar Nov 21 '22 14:11 Norserium

No, my company is not allowing me to make this public, until we launch. ~April - 2023

hamidihekmat avatar Dec 08 '22 16:12 hamidihekmat

@hamidihekmat, that's okay. I will wait.

Norserium avatar Dec 08 '22 17:12 Norserium

thanks man :)

hamidihekmat avatar Dec 08 '22 17:12 hamidihekmat

https://user-images.githubusercontent.com/47622106/206524545-6ec874fd-1370-48c6-b55a-6ab147b21a22.mov

Also, is there away to restrict the zoom to stay on the image aspect ratio? I'll take a look at your code though to see if I can fix it

hamidihekmat avatar Dec 08 '22 17:12 hamidihekmat

@hamidihekmat, but if you resize an image a little bit the background aspect ratio will be changed in any case. Could you draw some pictures to illustrate your idea?

Norserium avatar Dec 08 '22 19:12 Norserium

@hamidihekmat, any news?

Norserium avatar Apr 15 '23 09:04 Norserium

@hamidihekmat, I close the issue, but feel free to reopen.

Norserium avatar Sep 29 '23 21:09 Norserium