CODEWITHSUNDEEP
phpcssrotation
Itzik Ben Hutta
Itzik Ben Hutta

Reputation: 193

CSS rotation behaves different than PHP

I'm trying to fix the image rotation on preview using the FileReader API.

This is the client side code

reader.addEventListener("load", function () {
var exif = EXIF.readFromBinaryFile(base64ToArrayBuffer(this.result));
$('.preview-images').append(generatePlaceholder(this.result, this.index));

switch(exif.Orientation){
    case 8:
        $('.placeholder img').css('transform','rotate(90deg)');
        break;
    case 3:
        $('.placeholder img').css('transform','rotate(180deg)');
        break;
    case 6:
        $('.placeholder img').css('transform','rotate(-90deg)');
        break;
}
startUpload(this.index);
}, false);

This is the PHP code, which fixes well the rotation.

$exif = exif_read_data($filename);
if (!empty($exif['Orientation'])) {
$image = imagecreatefromjpeg($filename);
switch ($exif['Orientation']) {
    case 3:
        $image = imagerotate($image, 180, 0);
        break;

    case 6:
        $image = imagerotate($image, -90, 0);
        break;

    case 8:
        $image = imagerotate($image, 90, 0);
        break;
}

imagejpeg($image, $filename, 90);
}

My issue is that the CSS rotation does the opposite of the PHP although the degrees are the same. When the case is 6, the PHP code rotates it from left to right 90 degrees, but the CSS rotates it right to left 90 degrees. So to get the same behavior I need to change the CSS rotation to 90 instead of -90. How come they behave differently when they use the same degrees?

Upvotes: 2

Views: 124

Answers (1)

bretterer
bretterer

Reputation: 5781

In PHP image rotation rotates anticlockwise (or counterclockwise)

Rotation angle, in degrees. The rotation angle is interpreted as the number of degrees to rotate the image anticlockwise

In CSS it is rotated clockwise. Hence the difference

Upvotes: 3

Related Questions