Cropper js - Cropper grid issue - Help please!

JavaScript
1

Hi All,

This is my first post having joined a moment ago.

I’ve been putting together an image editor as part of a private project and I’ve hit a roadblock with the crop grid (using cropper.js). If you look at the attached image the grid appears to be two rectangles (one plain and the other dotted blue lines) but they are not in sync. Ive spent days trying to resolve this.
I know Python but Im vibe coding all this JS in my HTML and the AI and I can’t fugure it out.
The AI and I had a breakthrough when we searched for the following in the DevConsole of Page Inspect with the grid selected.

document.querySelector(‘.cropper-canvas’).getBoundingClientRect()

This revealed how CropperJS overlays the crop box onto an image that hasn’t been properly recognized or sized by the browser “at the moment Cropper is initialized”. Even though my CSS Image Viewer container is correctly sized, the
#editorImage.getBoundingClientRect()returns thewidth: 0, height: 0` meaning the browser doesn’t think the image has any size when Cropper is trying to work with it.

This mismatch creates:

  • A correctly functional crop grid that appears detached from the visible image.
  • Weird behavior like double outlines or click areas that feel offset.

If you look at the image you can see the big blue square is in the centre of the image when it ought to be bottom right.

Has anyone come across this before? All helpo would be much appreciated.

CLIP - Cropper grid not aligned
CLIP - Cropper grid not aligned987×579 55.6 KB

2

Hi,

I think you’re on the right track—this looks like a timing issue where CropperJS is initializing before the image has fully loaded. That causes getBoundingClientRect() to return 0 for width/height, which throws off the crop box alignment.

To fix, you’ll want to wait for the image itself to load before initializing CropperJS. Something like:

const img = document.getElementById('editorImage');
img.onload = () => {
  new Cropper(img, { /* options */ });
};

If you’re setting the image src dynamically, make sure to attach the onload handler before setting src.

HTH

2 Likes
3

Hi James,
Thank you for your reply and suggestion. I will try this out today and get back to you.
Regards,
James

4

I tried a variation of your script James but it didn’t resolve the issue. Thank you anyway.

I decided to run another test whereby I put a factory standard boiler plate cropper (basic HTML, CSS, and JS) above my current Image Viewer Container. Interestingly enough an image appeared and the crop box was PERFECTLY aligned in it, however due to styling and positing it appeared very small and in the top let hand cornder of the page, throwing the rest of the layout. BUT IT WAS WORKING (see clip 1). I wanted to show more clips b ut new users are only allowed one, how annoying.

I then put that same boiler plate croppper (using the same boiler plate CSS) inside my container and guess what, the crop grid became misaligned again (Had another clip but can’t show it as Im a new user).

This made me think two things:

  1. There is parent CSS that is preventing the cropper from sitting properly; or
  2. There is a fundamental flaw in how I built the page. What I mean by that is that I created the page first with an Image Resizer. I then added a Crop Button and got the Cropper JS to activate. But what’s happening is Cropper JS is activating before the image arrives and therefore picks up zero width and height measurements, hence the misalignment. These Cropper Grid dimensions have been proven by checking the Console log in the web page Inspect.

I’m now going to investigate what happens when the Crop Button is pressed to isolate the issue and perhaps allow the cropper grid to wait for the image to arrive first.

Any thoughts on this issue would be welcome.

1. CLIP - Boiler Plate Crop HTML with small image but working - 1
1. CLIP - Boiler Plate Crop HTML with small image but working - 11408×895 188 KB

5

Hi James,

Thanks for the update — sounds like you’re getting close to the root cause.

If you’d someone to take a closer look at the problem, the best next step would be to put together a minimal reproducible example — just enough code to show the issue, ideally using plain HTML, CSS, and JS. Something we can drop into a file and open locally to see the problem ourselves.

That’ll make it way easier to pinpoint whether the issue is due to timing, layout, or something else interfering with CropperJS.

1 Like
6

Hi all,

Well, I finally resolved this issue. What a bloody headache.

I had to strip everything from the page starting with the HTML, then, I removed all the JS function by function, and the problem still persisted. I then removed the CSS one by one until I came across this little bugger:

.workspace-box span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  color: gray;
}

The workspace-boc is the image container seen in the CLIP. This span element was nested between these other two workspace-box CSS elements:

.workspace-box {
  position: relative;
  width: 500px;
  height: 500px;
  max-width: 800px;
  aspect-ratio: 5 / 3;
  min-height: 290px; /* ✅ Force vertical space for image */
  border: 2px dashed lightgray;
  background-color: #f9f9f9;
  overflow: hidden;
  Flex: 1 1 0;
}

workspace-box span

.workspace-box span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  color: gray;
}

.workspace-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* or 'cover' if you want, but 'contain' preserves the image */
  display: block;
}

The moment I deleted “.workspace-box span {” the Crop Grid aligned (See CLIP).

It’s Friday night and I’ve been troubleshooting this for two weeks and finally resolved it. Chat GPT failed to see this issue, even 4.1 was struggling although much better for code for sure.

AI is an incredible tool but not able to resolve all issues. I was about to put this issue into Claude to see if it could help but decided to just get my hands dirty. I’ve learn’t a lot in the process!

CLIP - Now working
CLIP - Now working832×451 39.8 KB

3 Likes
7

Congrats on working out where it was going wrong! I appreciate you taking the time to report back.

This is one of those cases where vibe coding can take you pretty far, but when things break in weird ways, having some programming instincts about where to look really pays off. It sounds like you’ve levelled up through the process.

Hope your Friday night was more fun than your past two weeks!

2 Likes
8

Hi James, and SitePoint,

For anyone who is curious about this project, the site is now live (finally!).

It’s my first SaaS project, hopefully there will be many more to come. It’s free to use. Please check it out here:

Best wishes,
James

2 Likes
9

Good job!! Thanks for taking the time to report back :grinning_face: