Image has a width/height of 0

Are 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

Hi,

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:

A small workaround is the following CSS rule:

.manualcrop-inline .manualcrop-image {
  height: auto!important;
}

PS. using !important to override the inline style.

Hi,

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

Could you please check if the latest dev version fixes this issue? Thanks!

Matthijs

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

Up there is GIT patch, here is entire manualcrop.js file, modified from manualcrop_7.x-1.4+70-dev

I 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

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

Hi,

Thanks a lot for your tests (I really appreciate it), but could you please provide some extra information:

• If you updated from a previous version, did you clear your site/browser cache before your tests?
• What version of imagesLoaded are you using?
• Are you using a responsive theme? If yes, please test again in a none-responsive theme like Bartik.
• I added an alert box that pops up if the width or height are zero, did yo see it?
• Please inspect the overlay to see the inline style, what are the width and height?
• What's the filesize of the uploaded image?

I think that's all... Thanks again!

Matthijs

Shifted 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 :()

• i installed a fresh copy of the module dev+72
• downloaded the one provided in the module page
• am using adaptive....with seven as admin theme it works in all my browsers including ie8 (only shows a blank overlay with adaptive in ie)
• didn't see an alert box
• i tried with image sizes 83kb to 2Mb
• class="manualcrop-image image-style-none" src="sites/default/files/FabianOefner8.jpeg" width="800" height="534" style="width: 800px; height: 0px;"

Thanks a lot for the quick response, we're moving forward to a solution :-)

Matthijs

Hi 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

          // Calculate the new width and height using the full image.
          resized.width = Math.round(scaleX * ManualCrop.parseInt(originalImage.width()));
          resized.height = Math.round(scaleY * ManualCrop.parseInt(originalImage.height()));

you should place new code:

          // Calculate the new width and height using the full image.
          var original_image_width = originalImage.width();
          var original_image_height = originalImage.height();
          if (!original_image_width) {
            original_image_width = originalImage.attr("width");
          }
          if (!original_image_height) {
            original_image_height = originalImage.attr("height");
          }
          // Calculate the new width and height using the full image.
          resized.width = Math.round(scaleX * ManualCrop.parseInt(original_image_width));
          resized.height = Math.round(scaleY * ManualCrop.parseInt(original_image_height));

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.

I 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!

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

Thanks for your feedback! I'll give the adaptive theme a test drive in IE 8, Chrome and Opera.

Hey 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.??

Yeah, you can/may simply comment out the alert.

I'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.

Weird, 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?

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

Hi,

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!

Hey,

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.

Attempt #35625525 :-) Please give it a try... All issues I could reproduced are resolved!

Hey,

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

Seems a lot like this issue

http://stackoverflow.com/questions/5198094/jquery-chrome-image-width-and...

Ie. in getImageDimensions

  var rawImage = new Image();
  rawImage.src = image.attr('src');

  var dimensions = {
    width: ManualCrop.parseInt(rawImage.naturalWidth || rawImage.width),
    height: ManualCrop.parseInt(rawImage.naturalHeight || rawImage.height)
  }

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.

Ok, 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.

Hi,

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

Yup, 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

Committed! Thanks for your fast reply!

Hey, tested with recent chrome, opera & firefox. Everything works great. Alert box or no response in ie8.

This patch broke IE8.

I added the following to 'getImageDimensions' to get it working again :

  if(!(dimensions.width && dimensions.height)) {
    var tmp = new Image();
    tmp.src = image.src;
    dimensions.width = tmp.width;
    dimensions.height = tmp.height;
  }

Not the prettiest, but it seems to work.

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

I've committed a few changes based on this patch, thanks!