scottcheng / cropit

A "customizable crop and zoom" jQuery plugin.
http://scottcheng.github.io/cropit/
MIT License
874 stars 305 forks source link

previewSize undefined #165

Closed jupitercow closed 8 years ago

jupitercow commented 8 years ago

I am pretty excited about the new rotate controls, but the latest version doesn't work at all for me. When I try to upload an image, I get this error and no image:

Uncaught TypeError: Cannot read property 'width' of undefined - Line 660

This line:

return imageWidth * maxZoom < previewSize.width * exportZoom || imageHeight * maxZoom < previewSize.height * exportZoom;

Which is part of:

{
  key: 'shouldRejectImage',
  value: function shouldRejectImage(_ref) {
    var imageWidth = _ref.imageWidth;
    var imageHeight = _ref.imageHeight;
    var previewSize = _ref.previewSize;
    var maxZoom = _ref.maxZoom;
    var exportZoom = _ref.exportZoom;
    var smallImage = _ref.smallImage;

    if (smallImage !== 'reject') {
      return false;
    }

    return imageWidth * maxZoom < previewSize.width * exportZoom || imageHeight * maxZoom < previewSize.height * exportZoom;
  }
}

For me, previewSize is not getting set anywhere. I am still trying to figure out why... I tried this without changing any of my code from what was working with the last version. And I tried it will just the most basic setup, and not setting any options...

jupitercow commented 8 years ago

Ok. I figured this out. You changed the default class for the preview container:

From: <div class="cropit-image-preview"></div>

To: <div class="cropit-preview"></div>

I thought I was going crazy...

The rotate is an awesome start! It works really well at capturing the updates, and is the perfect fix for the rotation problems. Thanks for adding this and so quickly!

For me, the image isn't fitting properly anymore, I can get space on the bottom and right sometimes, but especially when I rotate. I am looking to see if this has to do with my own resizing customization or potentially other renaming issues. So some more testing on my end.

jupitercow commented 8 years ago

It is related to my custom resizing. Seems like everything is great!

scottcheng commented 8 years ago

Thanks! There is a problem that when .cropit-preview has border and box-sizing: border-box, the size calculation is off. I fixed it in e9fcfd1c7122ed395b568d658d998131ddd5c6ff but haven't released it yet. Not sure if that's what happened in your case?

Yes I changed the markup structure, and if you are using image background there's no need for the container anymore. I should probably put a migration guide on the website.

jupitercow commented 8 years ago

I think I do meet that border/border-box criteria. But I had a custom onResize event running to make it responsive, and it got messed up a bit. It was affected by the upgrade, but it was also custom and fixable. I had to make sure I set the width and height of the preview window and not just set the "previewSize". It is hard to say exactly what caused the change, because we just updated a bunch of stuff. The application is in prerelease right now as we clean up some stuff.

So excited about this update! Thanks again.

scottcheng commented 8 years ago

Thanks for the elaboration -- helped me catch another bug 68115dd36d08a1ff60f2078842847b49dff0cffd.

jupitercow commented 8 years ago

Nice. That covers my fix. I figured it was local to me. Glad it helped.