When I scan a 300dpi image (2550×3300) from scanner the Cropper.js zoom is move content to bottom of page and image disapeared (moved down of the screen).

I’m making a page for staff to upload a profile photo for their ID cards. The final image must be 500x500px when submitted. I’m trying to use cropperjs to allow the user to select a square of at least 500×500 which is then resized down (not up) to 500x500px. E.g. if a user uploads a 5000x8000px image then the can draw a square over the image which is at least 500px on each side and then upload the cropped image.