4 {{ upvoteCount | shortNum }}
4 {{ upvoteCount | shortNum }}

Need to fix image rotation problem when uploading and resizing images.

by man5
3 replies
This new issue arose when I tried uploading an image to my website from Iphone. Iphone apparently only saves landscape based photos, despite the fact they were taken in portrait mode. To fix it I found out to use exif_read_data to rotate the photo into it's original place.

I have a function that does that. The image does rotate. However, the image also gets cut off at the bottom and the remaining width of the image is turned into black background. I've attached a sample to show you.

This only happens when uploading a portrait photo from iphone. Landscape taken photos look fine.

Here is my code. Hopefully you can point out something that I am not seeing.

Edit fiddle - JSFiddle
#fix #image #images #problem #resizing #rotation #uploading
  • Profile picture of the author InsolentCat
    Looks like the width and height are not getting switched when it's rotating.

    Your code looks incomplete as well - I see the image rotate function defined, but I'm not seeing it called anywhere.

    I think, though, if you need to rotate the image, you need to swap the height and the width, and then it should work.
    {{ DiscussionBoard.errors[9163355].message }}
    • Profile picture of the author man5
      Originally Posted by InsolentCat View Post

      Looks like the width and height are not getting switched when it's rotating.

      Your code looks incomplete as well - I see the image rotate function defined, but I'm not seeing it called anywhere.

      I think, though, if you need to rotate the image, you need to swap the height and the width, and then it should work.
      It's being called in the switch type case like this
      $img = getOrientedImage($temp);

      If you would like to fix my script and show me my mistakes, that'd be wonderful.
      Signature
      www.imdabest.ca
      {{ DiscussionBoard.errors[9163556].message }}
  • Profile picture of the author InsolentCat
    This is a hack, and without having the full code, I can't really test it, but this is what I would try:

    Code:
    function swapHW() {
	global $height, $width;
	$tempHeight = $height;
	$tempWidth = $width;
	$height = $tempWidth;
	$width = $tempheight;
}

function getOrientedImage($imagePath){
	$image = imagecreatefromstring(file_get_contents($imagePath));
	$exif = exif_read_data($imagePath);
	if(!empty($exif['Orientation'])) {
		switch($exif['Orientation']) {
			case 8:
				$image = imagerotate($image,90,0);
				swapHW();
				break;
			case 3:
				$image = imagerotate($image,180,0);
				break;
			case 6:
				$image = imagerotate($image,-90,0);
				swapHW();
				break;
		}
	}
	return $image;
}
    One new function, and a slight rewrite of the getOrientedImage function.

    If that works, great, if not, pm me and I can help you get it sorted.
    {{ DiscussionBoard.errors[9166391].message }}

Trending Topics