jQuery 이미지 미리보기 exif 회전 문제

나는이 jQuery 함수를 사용하여 업로드하기 전에 이미지를 표시합니까? 이미지는 모바일 장치에서 업로드되며 exif 방향에 문제가 있습니다. 이 함수는 실제 파일 이미지의 base64 코드로 미리보기 이미지의 src를 변경합니다.jQuery 이미지 미리보기 exif 회전 문제

서버 측 (PHP)에서 업로드 할 때 exif 로테이션을 수정하는 기능을 사용하고 있습니다.

jQuery에서 PHP 코드와 비슷한 것을 만들 수 있습니까? 그래서 나는 오른쪽 회전으로 업로드하기 전에 이미지를 표시 할 수 있습니까?

자바 스크립트

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

예, 확인합니다. 이미지를 미리 보려면 FileReader API를 사용하고 있습니다. 또한 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 이미지 미리보기 exif 회전 문제

답변

관련 문제