Question

我正在尝试使用FileReader API修复预览中的图像旋转。

这是客户端代码

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);

这是PHP代码，可以很好地修复轮换。

$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);
}

我的问题是CSS旋转与PHP相反，尽管度数相同。当案例为6时，PHP代码将其从左向右旋转90度，但CSS将其从右向左旋转90度。因此，为了获得相同的行为，我需要将CSS旋转更改为90而不是-90。当他们使用相同的学位时，他们的表现如何？

Answer 1

在PHP图像中，旋转逆时针（或逆时针）旋转

旋转角度，以度为单位。旋转角度被解释为逆时针旋转图像的度数

在CSS中，它顺时针旋转。因此差异

CSS旋转行为与PHP不同

1 个答案: