Jquery Plugin simple Lightbox IE Bug答案

【问题标题】：Jquery Plugin simple Lightbox IE BugJquery Plugin simple Lightbox IE Bug
【发布时间】：2020-05-15 08:49:33
【问题描述】：

我在我的网站上下载并安装了 Jquery Plugin simple Lightbox (http://dbrekalo.github.io/simpleLightbox/)。现在我才发现，当我上传纵向图片时，IE 会将图片旋转 90°：刚刚发现IE也支持插件中的所有类。但是如果我直接打开图片，它也会在 IE 中以 90° 角显示，但在 Chrome 中却没有正确显示

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

【问题讨论】：

你能提供更多细节和 jsfiddle 或类似的工作示例吗？

标签： jquery css plugins

【解决方案1】：

您肯定需要为 Internet Explorer 添加一些修复程序，因此请执行以下操作：

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

但首先你需要看看为什么在 Internet Explorer 中旋转 90 度，应该有一些类不被 IE 支持，所以我建议检查 IE 中的元素，将它与 chrome 或它正在工作的浏览器进行比较，然后将 CSS 中的修复应用到类 'iefix'，然后使用上面提到的代码添加类。

【讨论】：

【解决方案2】：

我发现，它与服务器或 CSS 无关。上传的图片仍然有一些 Exif 数据，图片旋转了 90°。我通过将其旋转到赖特角并从图片中删除所有 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();
}

【讨论】：