search

fengyuanchen / cropper

⚠️ [Deprecated] No longer maintained, please use https://github.com/fengyuanchen/jquery-cropper
MIT License
7.75k stars 1.74k forks source link

Part of image pushed outside container after rotating 360 degrees #931

Closed DePalmo closed 6 years ago

DePalmo commented 6 years ago

OS: Windows 7 SP1 Ultimate x64 Browser: Chrome 61.0.3163.100 64bit Test case: https://jsbin.com/mukohebebo/edit?html,output How to replicate the issue:

This issue only happens when cropping tool is expanded, if it does not touch borders the issue is not present.

fengyuanchen commented 6 years ago

Bug of Chrome? Please upgrade to Chrome v62 and try again.

DePalmo commented 6 years ago

Updated Chrome to 62.0.3202.62, issue is still present. I also tried IE11 and Firefox, versions are in screenshots.

2017-10-26 19-41 image 001 2017-10-26 19-41 image 002 2017-10-26 19-40 image 002

fengyuanchen commented 6 years ago

Because the viewMode is 1 and the crop box is not centered:

  1. Move the crop box to left with 10px offset.
  2. Rotate 90°.
  3. In order to fit view mode restrictions, the image will move left 10px automatically too.
  4. Rotate 90°.
  5. You can see the image has 10px offset now.

Keep the crop box center absolutely, you will not run into this issue.

Another solution:

$('#jcrop')
  .cropper('clear')
  .cropper('rotate', 90)
  .cropper('crop');