Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
After uploading an image and hitting the crop button, the user is presented with a blank, black screen and can't see the image. This doesn't happen in Firefox or IE, only Chrome. If you hit "Maximize selection" then "Save" then "Crop" again, the image shows up and can be cropped.
I don't think this is the same as #2037753: Chrome has trouble figuring out width/height in getImageDimensions, but could be related.
Comment | File | Size | Author |
---|---|---|---|
#36 | manualcrop-ie8-image-sizes-fix-2093533-36.patch | 565 bytes | k.minkov |
#30 | manualcrop-async-dimensions-2093533-30.patch | 1.74 KB | Matthijs |
#29 | manualcrop-async-dimensions-2093533-29.patch | 29.79 KB | danquah |
#2 | Screen Shot 2013-10-04 at 11.26.26 AM.png | 74.09 KB | apanag |
#2 | Screen Shot 2013-10-04 at 11.27.07 AM.png | 52.88 KB | apanag |
Comments
Comment #1
MatthijsAre there any JavaScript issues in your console? Could you try to wait a few seconds before clicking the crop button, the image might not be loaded yet (what means there's something wrong with the imagesLoaded plugin)...
Could you let me know if that helps? Thanks!
Matthijs
Comment #2
apanag CreditAttribution: apanag commentedHi,
I was able to reproduce it. Now Javascripts errors were thrown, but somehow the image has height:0px; Is this related to the imagesLoaded plugin?
Some, helpful I hope, screenshots:
Comment #3
apanag CreditAttribution: apanag commentedA small workaround is the following CSS rule:
PS. using !important to override the inline style.
Comment #4
MatthijsHi,
This looks indeed like the image isn't loaded yet when the crop tool tries to figure out the height... I should look in to this!
Thanks for the screenshots.
Matthijs
Comment #5
MatthijsCould you please check if the latest dev version fixes this issue? Thanks!
Matthijs
Comment #6
heatherwoz CreditAttribution: heatherwoz commentedNo dice, it still didn't work for me.
Comment #7
biosonic CreditAttribution: biosonic commentedI noticed the same bug on my development machine (ubuntu), but does not appear on the production server (centos).
Quick fix patch is in attachment.
I can not figure out what it is, if someone understands please let me know.
When there is a bug, after selecting the format, at the time of opening Croptool, the Chrome download full image.
When there is no bug, full image is not requested, probably is taken from cache.
Comment #8
biosonic CreditAttribution: biosonic commentedUp there is GIT patch, here is entire manualcrop.js file, modified from manualcrop_7.x-1.4+70-dev
Comment #9
MatthijsI just did a few more changes, hopefully it's fixed now (please try again if you have some time)? The problem is that I'm currently unable to reproduce this, so I'm not sure what's causing this...
Matthijs
Comment #10
SantVim CreditAttribution: SantVim commentedBeen testing the module for a few hours now in local wamp. The first manual crop style i have set works great in all browsers in my comp (chrome,opera,ff, ie).
Though issue arises with all later manual crop styles. All styles works in FF not in opera and chrome. I have to click the crop and cancel a few times before i can make the original image appear. Thought may be the image isn't uploaded. But the image disappears again if i click the cancel and crop again.
with latest dev.
and yeah great module and amazing support. Thanks Matthijs.
Comment #11
MatthijsHi,
Thanks a lot for your tests (I really appreciate it), but could you please provide some extra information:
I think that's all... Thanks again!
Matthijs
Comment #12
SantVim CreditAttribution: SantVim commentedShifted the sited from local to my hosting server and it works gr8 in latest FF, opera and chrome with adaptive theme only if the crop after upload is unchecked. (ignore my about my last comment on first and later styles, i got it it was the responsive theme :()
Comment #13
MatthijsThanks a lot for the quick response, we're moving forward to a solution :-)
Matthijs
Comment #14
Nikita Petrov CreditAttribution: Nikita Petrov commentedHi all!
I think i have solved the similar problem, happened only in my own zen subtheme (in bartik theme the module works fine)
Here was the problem:
<div class="manualcrop-preview-cropped"><img width="1206" height="809" style="width: 0px; height: 0px; margin-left: -391px; margin-top: -206px;"></div>
Css styles for width and height of original preview image was switched to 0 for some reason, i don't know why, so i wrote this patch to solve it, maybe it will help someone:
manualcrop.js, line 548:
instead of
you should place new code:
I will not write a patch for this issue because i'm not sure it is a good approach for solving that kind of problem, i hope Matthijs will decide how to solve it in the best way.
Comment #15
MatthijsI was finally able to reproduce this in Chrome using the Zen theme. After some intensive debugging I found a small (but important) bug in the isLoaded() function.
This bug has been fixed and it works fine now... Could one of you please give the latest dev (or a git checkout to be sure you have the latest version) a test drive? Thanks!
Comment #16
SantVim CreditAttribution: SantVim commentedTested 7.x-1.4+81 on latest chrome,FF,opera and ie8. Works good with the admin theme (seven) on all browsers.
With adaptive subtheme works fine in firefox, shows try another browser alert once in chrome and opera. Dismiss the message and trying again the crop overlay with image and preview appears.
Persistent alert, Try another browser on clicking the crop button in ie8.
Comment #17
MatthijsThanks for your feedback! I'll give the adaptive theme a test drive in IE 8, Chrome and Opera.
Comment #18
SantVim CreditAttribution: SantVim commentedHey Matthijs, I was using 7.x-1.4+72, With height: auto !important in css i was able to get the images appear in all the browsers but now after updating to 7.x-1.4+81 am getting those alert message in chrome,opera and ie.
css seems to fix the issue Until height:0 is fixed in js how to get the alert message go away??? Can i delete the line 826 in manualcrop.js.??
Comment #19
MatthijsYeah, you can/may simply comment out the alert.
Comment #20
heatherwoz CreditAttribution: heatherwoz commentedI tested the latest dev and it still does not resolve the issue for my sites. We are using a zen subtheme, so maybe that is interfering somehow. Will try to dig into it when time allows.
Comment #21
gearmonkey CreditAttribution: gearmonkey commentedI'm still having the problem but I have notice when I'm logged in as admin, the manual crop works as expected.
I too am running adaptive themes.
Comment #22
MatthijsWeird, I just gave the default adaptive subtheme a try and it works fine for me (as admin and regular user)...
But in yet another attempt to fix this I just discovered and implemented the naturalWidth and naturalHeight image properties, hopefully these will (finally) fix the problems for you guys!
If not, is there someone willing to let me do a test drive using your theme?
Comment #23
SantVim CreditAttribution: SantVim commentedHey Matthijs,
Tested multiple hours with a fresh installation of AT latest dev and manual crop latest dev. Looks the height issue is fixed for me in the latest chrome, Opera and FF.
1. Crop after upload option just gives a blank overlay.
2. Stopped working in ie8 altogether. Clicking on the crop button does nothing. (i think i broke my mouse trying to click on it hard :D)
I still have the installation in my server if you wanna test and thanks for the amazing work.
Comment #24
MatthijsHi,
Thanks for your intensive testing, I hope your mouse survived it :-)
I just fixed the IE8 compatibility (there was a JavaScript exception), but I couldn't reproduce the crop after upload issue...
So it would be nice if I could do a test run on your set-up. Just send me the details (url + browser) through my personal contact form.
Thanks in advance!
Comment #25
SantVim CreditAttribution: SantVim commentedHey,
Tested with ie8 works good, may be crop after upload was due to my server limitations(cheap shared hosting environ).
With multi value image fields, the alert box pops when the crop button is clicked for every uploaded image. (Chrome & Opera) Once it is dismissed the crop works fine.
Will send the url, Please check adding the multi value fields too.
Comment #26
MatthijsAttempt #35625525 :-) Please give it a try... All issues I could reproduced are resolved!
Comment #27
SantVim CreditAttribution: SantVim commentedHey,
With 7.x-1.4+96-dev in a fresh installation
1. The alert box comes in the way of every crop after upload in multi value images.
Should i send you the url of my set up???
Looks #35625526 will be your lucky number. :)
Comment #28
danquah CreditAttribution: danquah commentedSeems a lot like this issue
http://stackoverflow.com/questions/5198094/jquery-chrome-image-width-and...
Ie. in getImageDimensions
after setting src you have to wait for the image to load before you can get the dimensions. Exactly how to do it is a bit tricky though.
Comment #29
danquah CreditAttribution: danquah commentedOk, I updated getImageDimensions to get the dimensions asynchronously and refactoring all code that used the function to work likewise.
It seems to fix the problem for me on chrome, and I have tested it successfully on firefox (mac) so far. It is quite a big change though so probably has to be tested quite a lot more.
Comment #30
MatthijsHi,
Thanks for the patch! I especially used the ImagesLoaded library to prevent any loading-related issues, so it's kinda weird that adding a second async loader fixes the issue.
What happens if you try the patch attached instead of yours?
Matthijs
Comment #31
danquah CreditAttribution: danquah commentedYup, that did the trick. In my patch I just assumed that rawImage was there for a reason? But I clearly prefer it to go away if the extra complexity was unnessecary.
My best guess as to why the second async load was necessary would be that Chrome loads the data for an image asynchronously when the src property gets updated and even though it probably got loaded really fast as the src is already loaded, it was still not fast enough to be ready as the dimensions where read off in the next line.
Are there anything in particular I should test now that rawImage is gone, or are we close to RTBC?
Regards
Mads
Comment #32
MatthijsCommitted! Thanks for your fast reply!
Comment #33
SantVim CreditAttribution: SantVim commentedHey, tested with recent chrome, opera & firefox. Everything works great. Alert box or no response in ie8.
Comment #35
tswaters CreditAttribution: tswaters commentedThis patch broke IE8.
I added the following to 'getImageDimensions' to get it working again :
Not the prettiest, but it seems to work.
Comment #36
k.minkov CreditAttribution: k.minkov commentedThe latest dev version still shows the "Try another browser" error (even with height: auto !important) . The snippet above from @tswaters seems to fix it. Here is a patch for it.
Comment #37
MatthijsI've committed a few changes based on this patch, thanks!