search

scottcheng / cropit

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

Uncentered image and wrong bound limit #189

Open dilonhenrique opened 8 years ago

dilonhenrique commented 8 years ago

It's been two days since I found this annoying problem. I look up everywhere and tried everything I know but none seems to work.

I have a "cropit-preview" div and everything seems right, but when I upload an image, it is loaded in the upper left corner, like the container was offset there (and it's not). Besides that, the minZoom is set as "fill" and the initialZoom as "image", but none seems to work. I don't what to do anymore.

The website is www.lascasas.com.br if you want to lookout.

Ow! I didn't "installed" Cropit with npm or Bower, I just linked the Js file as the demo file (and it fu**ing works!)

enminc commented 8 years ago

I am having a similar experience. @dilonhenrique did you solve the issue. I see the sample link you shared still has the issue.

I have it working just fine on an old site under v0.4.5 using jQuery v1.7.1.

Its having this issue for me under v0.5.1 using jQuery v2.1.4

Update With further testing using the running demo from v0.5.1 I have tested the following

Through Browser Inspector if I remove the transform css property from .cropit-preview-image the preview image mostly looks correct. So my guess is that the transform calculations are being thrown off based on whatever overrides are happening within Foundation5 css as well as Bootstrap css ( based on www.lascasas.com.br)

Update

Hacking the js file and forcing the x,y properties values of "rotatedOffset" to 0 I was able to correct the offset issue but the scale calculation were still off for me.

I am going to have to move on and I don't have a solution and don't have time to figure this all out but hopefully this helps someone isolate the issue. It all seems to be in the dynamic calculation that have been added since v0.5.0 for rotation.

I am switched back to v0.4.5 while still under Foundation5 css and works properly. I don't need rotation so I will just move forward with 0.4.5 for now

dilonhenrique commented 8 years ago

Didn't tried anything else since yesterday, so my problem still unsolved.

I consider myself a beginner in this kind of developing, so my first thought was that it was a installation problem or something basic. But if you have it too, maybe it's something else...

I just saw the demo here and it uses the 2.0.0 version of jQuery (which works fine) and I am using the 2.1.1 version. I'll try to downgrade jQuery on monday.

(I'm a brazilian, so sorry for any grammatical mistakes)

enminc commented 8 years ago

@dilonhenrique See my comments above. If you don't need rotation then you may find that using version 0.4.5 will work much better for you.

dilonhenrique commented 8 years ago

Thanks, man. Just did it and works fine, but I think my client will need the rotation tool, so I'd like to get it work on the latest version (or hack this version to do the rotation). Thanks again!