advanced-cropper / vue-advanced-cropper

The advanced vue cropper library that gives you opportunity to create your own croppers suited for any website design
https://advanced-cropper.github.io/vue-advanced-cropper/
Other
933 stars 130 forks source link

How to get x,x2,y,y2 coordinates? #110

Closed Awatatah closed 3 years ago

Awatatah commented 3 years ago

This is a dumb question but I need to know how to get the x,x2,y,y2 coordinates?

To add a bit of context, I need to send these in order for my transformer to crop the image

{"x":38,"y":0,"x2":438,"y2":520}
Norserium commented 3 years ago

Hello, @Awatatah! I don't know what this coordinates mean. Perhaps you should do something like this:

onChange({ coordinates }) {
    const x = coordinates.left;
        const y = coordinates.top;
        const x2 = coordinates.left + coordinates.width;
        const y2 = coordinates.top + coordinates.height;
}
Awatatah commented 3 years ago

@Norserium Thank you! I revised it a little and it seems to work correctly when compared to an old cropper we were using

setNewCoords(cp: any) {
    const x = cp.coordinates.left
    const y = cp.coordinates.top
    const x2 = cp.coordinates.left + cp.coordinates.width
    const y2 = cp.coordinates.top + cp.coordinates.height
    console.log({ x: x, y: y, x2: x2, y2: y2 })
  }

output

{"x": 106, "y": 0, "x2": 440, "y2": 434}