Getting X & Y equivalent coordinates from clipperBasic

[DeeRock94]

Hello,

I've noticed with clipperFixed it provides the ability to retrieve the X and Y coordinates from the image, of course with the clipperBasic which provides a little more control over image cropping, the only access to information I have is the width and height. This is such a great component other than this. Well done!

Edit:

So I've managed to roughly get the X & Y coordinate by using the zoomTL$ top & left values by doing

x = original-img-width zoomTL$ (top) / 100 y = original-img-height zoomTL$(left) / 100

I seem to be getting the correct crop area now with about 30 / 50 pixels chopped from the right that should be included so I'm almost there, just not entirely. Any suggestions?

[DeeRock94]

Hello - Classify this as being fixed, what I did was use your documentation over at https://timtnleeproject.github.io/vuejs-clipper/#/examples/canvas-to-image

I did: const jpgURL = canvas.toDataURL("image/jpeg")//to jpg const pngURL = canvas.toDataURL("image/png", 1)//to png

Passed this data to the backend in which I base64 decoded it using Image Intervention, allowing me to have a perfect crop of what was selected on the cropper before shipping it off as a new file to the projects S3.

Thanks for the component!

p.s I wish to keep this open if you wouldn't mind sharing any other potential methods for my own benefit and perhaps others in the future

[timtnleeProject]

Hi @DeeRock94 these components help to calculate the coordinates and the size of the clipping result so you don't need to implement by yourself.

However, as I mentioned in another issue, there're some component methods that deal with the processes.

Hope this help :)

[DeeRock94]

Hi @DeeRock94 these components help to calculate the coordinates and the size of the clipping result so you don't need to implement by yourself.

However, as I mentioned in another issue, there're some component methods that deal with the processes.

Hope this help :)

Hi @timtnleeProject

I managed to get it working, I have this integrated into a Vue frontend working with a Laravel backend, all my images use a class that is part of an interface so I try to keep things as robust and efficient as possible. Therefore since I was using image intervention which allows me to specify width, height, x and y. If the X and Y parameters are not provided within the procedure it will default by centering it.

Your component was providing me the width and height perfectly but using the top-left or bottom-right wasn't working too well for x & y however I did get it working with your documentation.

Thank you for your help :)