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:
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.
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.
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:
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.
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