Question

我在我的网站上下载并安装了Jquery Plugin简单灯箱（http://dbrekalo.github.io/simpleLightbox/）。现在我才发现，当我以人像上传图片时，IE会将图片旋转90°：刚刚发现，IE中也支持该插件中的所有类。但是，如果我直接打开图片，它也会在IE中以90°角显示，但在Chrome中不会正确显示

有人曾经经历过吗？我必须在我的Apache服务器中更改它吗？

Answer 1

您肯定需要为Internet Explorer添加一些修复程序，例如：

onShown: function(){
       if(isInternetExplorer){
           $('.ekko-lightbox').addClass('iefix');
       }
   }
});

但是首先，您需要了解为什么Internet Explorer会旋转90deg，IE应该不支持某些类，所以我建议检查IE中的元素，将其与chrome或正在运行的浏览器进行比较，然后在CSS中将修复程序应用于“ iefix”类，然后使用上面提到的代码添加该类。

Answer 2

我发现，这与服务器或CSS无关。上传的照片仍然带有一些Exif数据，且照片旋转了90°。我通过将其旋转到Wright角并从图片中删除所有Exif数据来修复它：

function autoRotateImage($image) {
    $orientation = $image->getImageOrientation();

    switch($orientation) {
        case imagick::ORIENTATION_BOTTOMRIGHT: 
            $image->rotateimage("#000", 180); // rotate 180 degrees
            break;

        case imagick::ORIENTATION_RIGHTTOP:
            $image->rotateimage("#000", 90); // rotate 90 degrees CW
            break;

        case imagick::ORIENTATION_LEFTBOTTOM: 
            $image->rotateimage("#000", -90); // rotate 90 degrees CCW
            break;
    }

    // Now that it's auto-rotated, make sure the EXIF data is correct in case the EXIF gets saved with the image!
    $image->setImageOrientation(imagick::ORIENTATION_TOPLEFT);
}

function fixuploadedimg($image) {
    autoRotateImage($image);//rotate and fix Exif rotation
    $image->stripImage();//remove all EXIF data

    //resize image if necessary
    $xWidth = $image->getImageWidth();
    $xHeight = $image->getImageHeight();
    if($xWidth > 1000)
    {
        $image->resizeImage(1000, ($xHeight*1000/$xWidth), imagick::FILTER_GAUSSIAN, 1); 
    }
    else if($xHeight > 1000)
    {
        $image->resizeImage(($xWidth*1000/$xHeight), 1000, imagick::FILTER_GAUSSIAN, 1); 
    }

    $image->writeImage($uploadimg_title);
}

function get_file_extension($file_name) {
    return substr(strrchr($file_name,'.'),1);
}


$img_ext_title = get_file_extension($_FILES['titelbild']['name']);
//$uploadimg_title_temp = $ordner.$foldername."/title_temp.".$img_ext_title;
$uploadimg_title = $ordner.$foldername."/title.".$img_ext_title;

if(move_uploaded_file($_FILES['titelbild']['tmp_name'], $uploadimg_title)){ 
    $img_title = new Imagick($uploadimg_title);
    fixuploadedimg($img_title);
    $img_title->clear();
    $img_title->destroy();
}
else
{
    echo "upload failed";
    exit();
}

jQuery插件简单的Lightbox IE错误

2 个答案: