Javascript 이미지 회전 저장 - Javascript imiji hoejeon jeojang

Question

이미지 뷰어형태로 당장 올릴 이미지를 미리보기형태로 작은모습으로 보여주는 기능을 만들고 있었는데, 스마트폰에서 찍은 사진을 테스트하다 보면 자동으로 회전되어 보이는 현상이 있었습니다.

목차 Show

자바스크립트 이미지 회전
답변을 하려면 로그인이 필요합니다.
ᕕ( ᐛ )ᕗ 로그인이 필요합니다

감자♥ 정상적으로 나옵니다.

꼬미♥ 꼬미야 왜 돌아갔니...

업로드 하고 페이지에 노출하는 형태라면 서버단에서 저장할 때, 처리하면 되지만 업로드 뷰어의 경우에는 스크립트단에서 해결이 필요하였습니다.

스크립트 라이브러리 중 Load-Image의 힘을 빌려 해결하였습니다.

github.com/blueimp/JavaScript-Load-Image#image-loading

blueimp/JavaScript-Load-Image

Load images provided as File or Blob objects or via URL. Retrieve an optionally scaled, cropped or rotated HTML img or canvas element. Use methods to parse image metadata to extract IPTC and Exif t...

github.com

위 github에서 라이브러리를 받을 수 있습니다.

EXIF

디지털 카메라와 스마트폰등에서 이미지 등의 정보를 기록할 수 있습니다.

해당 메타정보 중에 회전 방향 옵션을 받아올 수 있는데 이 회전 방향값인 orientation을 추출하고 처리하여 강제로 고정시키는 방식입니다.

단순하게 업로드 한 데이터에서는 회전정보를 알 수가 없다보니 blob을 통해 바이너리 데이터로 변환하여 데이터를 확인하는 절차를 따른다고 합니다.

Load-Image

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
    integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="./load_image/load-image.all.min.js"></script>
<body>
    <input type="file" id="upload">
    <img src="" alt="" id="preview" style="width:300px;height:300px;">
</body>

</html>

javascript

$(function () {
    $("#upload").on("change", function (e) {
        var files = e.target.files;
        var fileType = files[0].type;
        var limg = loadImage(files[0], function (img, data) {
            img.toBlob(function (blob) {
                var rotateFile = new File([blob], files[0].name, { type: fileType });
                var reader = new FileReader();
                reader.onload = function (e) { $("#preview").attr("src", e.target.result); }

                reader.readAsDataURL(rotateFile);
            }, fileType)
        }, { orientation: 1 });
    });
})

file 태그에 이미지가 올라가면 change이벤트에 의해 파일 정보를 받아오고 라이브러리 함수 loadImage를 통해 데이터를 blob으로 읽고 image태그에 처리를 해줍니다.

여기서 포인트는 2번째 파라미터 object값에 orientation값을 1로 해주면 세로 이미지로 볼 수 있었습니다.

여기서 값을 2로 처리하시면 좌우 반전되어 나오는 것을 볼 수 있습니다.

처리 동작 후 미리보기 이미지가 정상적인 회전으로 나옵니다.

자바스크립트 이미지 회전

조회수 1122회

javascript html5

html5에서 js로 이미지를 회전 시키는 함수를 구현하고 있습니다. prompt로 각도를 입력받는 만큼 이미지를 회전시키려고 하는데 사용한 변수는 아래와 같습니다.

outImgArr[][] // 원본 이미지
tarr[][]    // 출력할 이미지 배열
oldheight, oldwidth    //원본의 너비/높이
newheight, newwidth    //출력 이미지의 너비/높이
cnewheight, cNewWidth    //출력이미지 너비/높이의 반값
rad    //입력할 각도를 라디안으로 바꾼 값
alpha    // (oldheight,oldwidth)점과 x축과의 각도
beta        // sqrt(oldheight**2 + oldwidth**2) 빗변의 길이

tarr를 초기화 시킨 후,

newheight = parseInt(beta * Math.abs(Math.sin(rad+alpha)));
newwidth = parseInt(Math.abs(oldheight*Math.sin(rad)+oldwidth*Math.cos(rad)));

위와 같이 새로운 높이,너비를 구했습니다.

            for (var i = 0; i < oldHeight; i++) {
                for (var j = 0; j < oldWidth; j++) {
                    var h= parseInt((i-cnewheight)*Math.cos(rad)-(j-cNewWidth)*Math.sin(rad)+oldheight/2);
                    var w= parseInt((i-cnewheight)*Math.cos(rad)+(j-cNewWidth)*Math.sin(rad)+oldwidth/2);

                    if((0<=h&& h<oldheight) && (0<=w&& w<oldwidth)){
                        tarr[i][j] = outImgArr[h][w];
                    }

                }
            }

그리고 위와 같이 이중for문을 통해 tarr에 새로운 값을 넣었습니다. 예상대로라면 회전시킨 이미지가 정사각형으로 나와서 끝 부분이 잘리지 않아야 하는데 결과는 잘려서 나옵니다..

왜 그런 건지 알려주시면 감사하겠습니다.