fengyuanchen / cropper

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

Incorrect discovery of image natural size #949

Closed mbratoev closed 6 years ago

mbratoev commented 6 years ago

Hi,

I am implementing an app using cropperjs library and found that under certain conditions getImageNaturalSizes() function fails to discover the real image dimensions which leads to unexpected results.

Exploring the cropperjs code the following reasons for the problem were identified:

  1. Incorrect detection for support for image.naturalWidth and image.naturalHeight properties. For example Chrome browser running on MacOS does support these properties but the library still uses its fallback mechanism to determine the natural image size.

    Such Chrome has a userAgent string like: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.84 Safari/537.36". This initializes IS_SAFARI_OR_UIWEBVIEW variable with true (wrong!) and the fallback procedure is triggered when it should not be.

  2. Fallback method gives incorrect results if there is a css rule with very low specificity restricting rendered image width or height. For example : img { max-width: 100% }

    After adding the following styling directives to the temporary img element used to measure the image size the problem was solved.

    "max-width: none !important; min-width: 0 !important; max-height: none !important; min-height: 0 !important;"

Could you please arrange for the above problems to be fixed?

Regards, Mihail

fengyuanchen commented 6 years ago

Here is jQuery Cropper, not Cropper.js.

You may fall into the same issue as https://github.com/fengyuanchen/cropperjs/issues/279