Language/JavaScript

[JavaScript] 자바스크립트 이미지 회전

HeadKey 2023. 2. 28. 18:59

Intro

1. 모바일 사진 업로드 시 이미지가 회전되서 나오는 경우

2. 필요에 의해 이미지를 회전해야 하는 경우

 

위 두가지 경우에 해당 시 하기의 예제 참조.

 

1. 진행 순서

 

순서1. 하기의 내용 추가

<script type="text/javascript" src=" http://cdn.jsdelivr.net/npm/exif-js"></script>

순서2. html 작성

<img src = "555.jpg" id = "img"/>
<input type = "button" value = "Rotate" onclick = "imgRotate();"/>
<pre id = "imgTagDataSpan" ></pre>

순서3. Script 작성

 
<script type="text/javascript">
    function imgRotate() {
        const img = document.getElementById( "img" );

        EXIF.getData( img, () => {

            const imgTag = EXIF.getAllTags(img);
            const orientation = EXIF.getTag( img, "Orientation" );

            var imgTagDataSpan = document.getElementById("imgTagDataSpan");
            imgTagDataSpan.innerHTML = JSON.stringify(imgTag, null, "\t");
            
            switch( orientation ) {
                // 이미지 회전값이 0인경우 ( 정방향 )
                case 1 :
                    alert(1);
                    document.getElementById( "img" ).style.transform = "rotate( 0deg )";
                    break;

                // 이미지 90도 회전 ( 오른쪽으로 270도 회전해야됨 )
                case 6 :
                    alert(6);
                    document.getElementById( "img" ).style.transform = "rotate( 270deg )";
                    break;

                // 이미지 180도 회전 ( 오른쪽으로 180도 회전해야됨 )
                case 3 :
                    alert(3);
                    document.getElementById( "img" ).style.transform = "rotate( 180deg )";
                    break;

                // 이미지 270도 회전 ( 오른쪽으로 90도 회전해야됨 )
                case 8 :
                    alert(8);
                    document.getElementById( "img" ).style.transform = "rotate( 90deg )";
                    break;
            }

        });
    }
</script>

 

2. 결과

 

3. 추가설명 
1. EXIF.getAllTags(img) : 해당 이미지의 메타정보를 가져온다.
2. EXIF 정보에서 Orientation 값은 1~8까지 있으며 해당 값에 따라 rotate 각도가 달라진다.
3. 여러가지 테스트 결과 핸드폰 카메라를 이용했을 때 
   - 세로, 가로 어느 방향으로 찍느냐에 따라 Orientation 값이 달라지는 것으로 보인다.
   - 찍는 방향에 따라 값이 정확하지 않았다. 따라서 해당 값만 믿고 rotate 시켰다가 이상하게 회전할 수 있다...
   - 포토샵 등 이미지변환 툴에서 회전 후에 Orientation 값이 변경되었다.