imagerotate() function sometimes work and sometimes not

CocoDu43 · August 7, 2015

Sometimes imagerotate() PHP function doesn't work (no error, the image is simply not rotated), sometimes it works. It makes me crazy.

Here's my code:

if ($degrees == 90)
$degrees = 270;
elseif ($degrees == 270)
$degrees = 90;

// Chargement
$source = imagecreatefromjpeg($filename);

// Rotation
$rotate = imagerotate($source, $degrees, 0);

imagejpeg($rotate, $filename, 95);

// Libération de la mémoire
imagedestroy($source);
imagedestroy($rotate);

In the htaccess I set:

ExpiresActive Off

#ExpiresByType image/jpg "access plus 1 hour"
#ExpiresByType image/jpeg "access plus 1 hour"
#ExpiresByType image/png "access plus 1 hour"

so normally there is no cache.

Please help.

scootstah · August 8, 2015

Perhaps it is neither 90 nor 270 degrees?

CocoDu43 · August 8, 2015

Thank you for trying to help

The code with 90 and 270 is here because on the client side I use CSS to rotate the image, and the 90 and 270 degrees are reversed with the server side.

1) Here's the client side (HTML with a little PHP) :

<!DOCTYPE html>
<head>
<title>Photo</title>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" rightmargin="0" bottommargin="0">
<link rel="stylesheet" href="../css/bootstrap.min.css" type="text/css" media="screen"> <!-- for img-responsive class -->
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<style>
body {
    overflow:hidden; /* disable scrollbars */
}
.north {
transform:rotate(0deg);
-ms-transform:rotate(0deg); /* IE 9 */
-webkit-transform:rotate(0deg); /* Safari and Chrome */
}
.west {
transform:rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
-webkit-transform:rotate(90deg); /* Safari and Chrome */
}
.south {
transform:rotate(180deg);
-ms-transform:rotate(180deg); /* IE 9 */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
    
}
.east {
transform:rotate(270deg);
-ms-transform:rotate(270deg); /* IE 9 */
-webkit-transform:rotate(270deg); /* Safari and Chrome */
}
#my_image {
	/* animation */
	-webkit-transition: all 0.7s ease;
	transition: all 0.7s ease;
}
</style>
<script>
function etape2 ()
{
	$('#my_image').hide();
	
	window.opener.location.reload();

	x=$('#photo_x').val(); 	console.log(x);
	y=$('#photo_y').val();	console.log(y);
	
	// nouvelle taille de la fenêtre
	if ((x > y) && (x > (screen.availWidth  - 120))) {y = Math.floor(((screen.availWidth -120)*y)/x); x = screen.availWidth  - 120;}
	if ((y > x) && (y > (screen.availHeight - 120))) {x = Math.floor(((screen.availHeight-120)*x)/y); y = screen.availHeight - 120;}
	window.resizeTo(x, y);
	
	// nouvelle position de la fenêtre
	myleft=(((screen.availWidth-x)/2)-10);
	mytop=(((screen.availHeight-y)/2)-18);
	
	moveTo(myleft, mytop); 
	
	window.location.reload();
}
function turn_image()
{
    var img = $('#my_image');
	var degrees = "0";
    if(img.hasClass('north')){
		degrees = "90";
    }else if(img.hasClass('west')){
		degrees = "180";
    }else if(img.hasClass('south')){
		degrees = "270";
    }else if(img.hasClass('east')){
		degrees = "0";
    }	
	
	// demand to php file to rotate on the server
	if (window.XMLHttpRequest)
	{
		// code for IE7+, Firefox, Chrome, Opera, Safari
		xmlhttp=new XMLHttpRequest();
	}
	else
	{   // code for IE6, IE5
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}

	xmlhttp.onreadystatechange=function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			$('#form_return_from_server').html(xmlhttp.responseText);
			etape2();
		}
	}

	url = "photo_resize.php?filename=<?= $file ?>&degrees="+degrees;
	xmlhttp.open("GET",url,true);
	xmlhttp.send();
	
    if(img.hasClass('north')){
        img.attr('class','west img-responsive');
    }else if(img.hasClass('west')){
        img.attr('class','south img-responsive');
    }else if(img.hasClass('south')){
        img.attr('class','east img-responsive');
    }else if(img.hasClass('east')){
        img.attr('class','north img-responsive');
    }	

}
</script>

<div style="position:relative; ">
<?
    echo "<img id='my_image' class='north img-responsive'  src=\"$file\" onclick=\"window.close();\" style=\"cursor:pointer; cursor:hand;\" onmouseover=\"this.style.cursor='pointer'\">";
?>

 <div style=" position:absolute; right:1em; top:1em  ">
	<img src="../images/arrow_turn_right.png"  onclick="turn_image();" style="cursor:pointer; cursor:hand;" onmouseover="this.style.cursor='pointer'">
 </div>

</div>

<div id="form_return_from_server" style="display:none"></div>

<input type="hidden" id="photo_x">
<input type="hidden" id="photo_y">
</body>

2) And the complete server side (PHP) :

<?

if ($degrees == 90)
	$degrees = 270;
elseif ($degrees == 270)
	$degrees = 90;

// Chargement
$source = imagecreatefromjpeg($filename);

// Rotation
$bg_color = imagecolorallocate($source, 255,255,255);
$rotate = imagerotate($source, $degrees, $bg_color);
//$rotate = imagerotate2($source, $degrees, 0);
//$rotate = imagerotateEquivalent($source, $degrees, 0);

imagejpeg($rotate, $filename, 95);

// imagemagick
//passthru("convert -rotate $degrees $filename -"); // to new file
//passthru("mogrify -rotate $degrees $filename"); // to same file

// Libération de la mémoire
imagedestroy($source);
imagedestroy($rotate);


list ($photo_x, $photo_y, $type, $attr) = getimagesize($filename);

echo "<script>";
echo "$('#photo_x').val('$photo_x');";
echo "$('#photo_y').val('$photo_y');";
echo "</script>";
?>

CocoDu43 · August 10, 2015

I got the bug : the photo was in a popup which reloads the mother window. The problem was that the mother window has just uploaded the photo, so the rotated photo was overwritten by the original photo re-uploaded.

Sign In

imagerotate() function sometimes work and sometimes not

Recommended Posts

CocoDu43

Link to comment

Share on other sites

scootstah

Link to comment

Share on other sites

CocoDu43

Link to comment

Share on other sites

CocoDu43

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information