jQuery изображение preview exif rotation issue

Я использую эту функцию jQuery, чтобы отобразить изображение перед загрузкой. Изображения загружаются с мобильных устройств и имеют проблемы с ориентацией exif. Эта функция просто изменяет src изображения предварительного просмотра с кодом base64 фактического изображения файла.jQuery изображение preview exif rotation issue

На стороне сервера (php) Я использую функцию для коррекции exif-вращения при загрузке.

Могу ли я сделать что-то подобное в jQuery для моего PHP-кода? Чтобы я мог отображать изображение перед загрузкой с правильным вращением?

Javascript

function readURL(input) { 

    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 

     reader.onload = function (e) { 
      $('#blah').attr('src', e.target.result); 
     } 

     reader.readAsDataURL(input.files[0]); 
    } 
} 

$("#imgInp").change(function(){ 
    readURL(this); 
});

PHP

function image_fix_orientation($filename) { 
    $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, 100); 
    } 
}

источник

2015-01-31 Alex

Да, конечно. Для предварительного просмотра изображения вы используете API FileReader, что правильно. Но вы также должны проверить флаги EXIF и зафиксировать ориентацию. Вы можете использовать https://raw.githubusercontent.com/jseidelin/exif-js/master/exif.js

и проверить флаги, как это:

function fixExifOrientation($img) { 
    $img.on('load', function() { 
     EXIF.getData($img[0], function() { 
      console.log('Exif=', EXIF.getTag(this, "Orientation")); 
      switch(parseInt(EXIF.getTag(this, "Orientation"))) { 
       case 2: 
        $img.addClass('flip'); break; 
       case 3: 
        $img.addClass('rotate-180'); break; 
       case 4: 
        $img.addClass('flip-and-rotate-180'); break; 
       case 5: 
        $img.addClass('flip-and-rotate-270'); break; 
       case 6: 
        $img.addClass('rotate-90'); break; 
       case 7: 
        $img.addClass('flip-and-rotate-90'); break; 
       case 8: 
        $img.addClass('rotate-270'); break; 
      } 
     }); 
    }); 
}

Я предпочитаю вращать изображения с помощью CSS преобразования. Вот реализация:

.rotate-90 { 
    -moz-transform: rotate(90deg); 
    -webkit-transform: rotate(90deg); 
    -o-transform: rotate(90deg); 
    transform: rotate(90deg); 
} 

.rotate-180 { 
    -moz-transform: rotate(180deg); 
    -webkit-transform: rotate(180deg); 
    -o-transform: rotate(180deg); 
    transform: rotate(180deg); 
} 

.rotate-270 { 
    -moz-transform: rotate(270deg); 
    -webkit-transform: rotate(270deg); 
    -o-transform: rotate(270deg); 
    transform: rotate(270deg); 
} 

.flip { 
    -moz-transform: scaleX(-1); 
    -webkit-transform: scaleX(-1); 
    -o-transform: scaleX(-1); 
    transform: scaleX(-1); 
} 

.flip-and-rotate-90 { 
    -moz-transform: rotate(90deg) scaleX(-1); 
    -webkit-transform: rotate(90deg) scaleX(-1); 
    -o-transform: rotate(90deg) scaleX(-1); 
    transform: rotate(90deg) scaleX(-1); 
} 

.flip-and-rotate-180 { 
    -moz-transform: rotate(180deg) scaleX(-1); 
    -webkit-transform: rotate(180deg) scaleX(-1); 
    -o-transform: rotate(180deg) scaleX(-1); 
    transform: rotate(180deg) scaleX(-1); 
} 

.flip-and-rotate-270 { 
    -moz-transform: rotate(270deg) scaleX(-1); 
    -webkit-transform: rotate(270deg) scaleX(-1); 
    -o-transform: rotate(270deg) scaleX(-1); 
    transform: rotate(270deg) scaleX(-1); 
}

источник

2015-03-03 23:07:52

-1

<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 
<input id="inp" type='file'> 
<p id="b64"></p> 
<img id="img" width="300px" height="300px"> 
</body> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"> 
</script> 
<script type="text/javascript"> 
function readFile() { 
if (this.files && this.files[0]) 
{ 
    var FR= new FileReader(); 
    FR.onload = function(e) 
    { 
    document.getElementById("img").src=e.target.result; 
    document.getElementById("b64").innerHTML=e.target.result; 
    }; 
FR.readAsDataURL(this.files[0]); 
} 
else 
{ 
    alert("in else"); 
} 
} 
document.getElementById("inp").addEventListener("change", readFile, false); 
</script> 
</html>

источник

2016-09-22 14:20:35 user3026707

код вместе с описанием ценится. –

jQuery изображение preview exif rotation issue

ответ

Смежные вопросы