메뉴 건너뛰기

조회 수 36350 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

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

 

 

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

 

 

 

 

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

 

 

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

 

위 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로 처리하시면 좌우 반전되어 나오는 것을 볼 수 있습니다.

 

 

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

 


List of Articles
번호 제목 날짜 조회 수
247 활용예제 : 체크박스 전체선택 전체해제 /라디오버튼 2014.03.01 7020
246 현재시간 기준 날짜 계산 2016.09.21 6103
245 현재 날짜, 시간 ( Month + 1 에 대해서 ) 2021.03.25 218
244 핸드폰 번호 일부 마스킹크 작업 (정규식 이용) 2015.06.19 10741
243 해상도에 따라 배경 바꾸기 2014.03.01 6083
242 함수의 arguments 를 이름(key)으로 접근하기 2016.09.21 5976
241 한글 짜르기 2019.01.16 1179
240 한글 또는 영문만이 존재하는지 체크 2019.01.16 1163
239 풍선도움말 2019.01.16 1167
238 폼안에 태그명, 함수명 같을때 오류 2021.03.26 215
237 페이지 이동 2021.03.26 190
236 페이지 로드 할때 컨트롤에 포커스 주기 2015.02.03 8500
235 패스워드, 확인패스워드가 맞는지 체크 2023.01.12 129
234 팝업창 차단 "허용 메시지" 2018.09.28 1738
233 팝업창 맨위로 올라오게 하기 2021.03.26 872
232 팝업창 가운데 띄우기 2016.12.23 6705
231 특정부위 마우스 오버시 설명을 보여주는 소스 2014.03.17 8697
230 특정 부분 인쇄 자바스크립트 2019.01.16 1588
229 특정 HTML DOM 엘레멘트로 스크롤 이동하기 2016.09.09 7075
228 텍스트박스(input type = "text") 숫자 증가, 감소 시키기 - 쇼핑몰 주문 수량 file 2015.06.19 12286
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 13 Next
/ 13

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved