3

I'm attempting to use Cropper.js to allow the user to crop large images -- images usually larger than 3000x3000 pixels.

When the image loads into my div element, it scales down to 1024px wide. In my test case, the original image is 4032x2268, so it's 1024x576 in the browser.

the getCropBoxData() and getCanvasData() methods return the x, y, width and height values of the selected area to be cropped, but they represent it relative to the 1024x576 scaling of the image, NOT the ones for the actual image at its original size.

I tried writing a conversion routine to determine the X and Y scale values and convert accordingly, but it's not working right.

At this point I figured I'd post here and see if there's a simpler way. Cropper.js seems to have a scaleX and scaleY value returned in the getImageData() method, but it doesn't work the way I had hoped.

Anybody know how I can deal with this?

RobG
  • 576
  • 2
  • 9
  • 21

1 Answers1

0

I figured it out. Here's the thing. The "y" value returned in the getCropData() method is wrong. The "x" value may be wrong too, but I'm not 100% sure. What I ended up doing was pulling the x and y values out of the getData() method, and that worked. I hope this helps somebody sometime!

RobG
  • 576
  • 2
  • 9
  • 21