[JavaScript] 휴대폰 사진 업로드시 회전 방지[JavaScript] 휴대폰 사진 업로드시 회전 방지

Posted at 2020. 3. 30. 16:11 | Posted in JavaScript & jQuery/JavaScript






■ 휴대폰 사진 업로드시, 사진이 원하는 방향으로 올라가지 않는경우





사실 해당 포스팅의 제목인 「 휴대폰 사진 업로드시 회전 방지 」 라고 적었지만 이건 사실 어그로를 끌기위한 그런 제목이고


해당 포스팅은 그 해결방법을 제시하기 위한 


휴대폰, 스마트폰의 카메라로 찍은 사진을 웹 브라우저를 통해 업로드 할경우,


이미지의 가로, 세로가 변경되어 등록되는 경우가 존재한다.


이러한 이유는 EXIF( Exchangeable Image File Format )의 회전값 변경이 반영되지 않기에 생기는 이유인데.


아래 이미지는 초기 스마트 폰에서 자주 볼 수 있었던 문제이다.

( 자이로 센서( Gyro Sensor ) 등의 기술 발전으로 이런 문제는 많이 해결 되었지만, 이미지의 편집등 다른 작업 과정으로 현재에도 이런 문제를 맏닥드릴 수 있다. )









가로로 찍은 이미지의 경우 스마트폰 상에서는 분명 정상적으로 보여주지만.


실제 이미지의 EXIF 값을 보면 회전정보( Orientation )가 90° CW 가 적용되어 있는것을 알 수 있다.


이를 회전정보 값을 브라우저에서는 인식하지 않고 보여지는 문제이다.







   # EXIF( Exchangeable Image File Format ) 란?



   디지털 카메라 등에서 사용되는 이미지 파일 메타데이터 포맷으로,


   카메라가 촬영한 사진, 녹음파일에 시간 등의 각종 정보를 담기 위해 개발되었다. 즉, 


   JPEG, TIFF 6.0과 RIFF, WAV 포맷에 이미지나 소리에 대한 정보를 추가로 기록할 수 있다.


   디지털카메라의 보급으로 널리 활성화되었고 이미지 메타데이터의 사실상 표준 지위에 있다.


   EXIF 데이터는 이미지 파일의 일부로 저장되며,


   EXIF 데이터를 지원하는 소프트웨어 사용 시 이미지를 변경해도 데이터를 보존한다.



   출처 : 나무위키( https://namu.wiki/w/EXIF )






간단하게 이미지 파일 하나를 선택하여 마우스 오른쪽 버튼을 클릭하고


오른쪽으로 회전( T ) 을 선택해 보자.







회전 정보 : 90° CW 로 반영된 것을 확인할 수 있다.


이 렇게 회전된 파일을 <img src="스토브리그.jpg">로 올려서 브라우저로 확인을 해 본다면.



# 소스코드

<html>

<head>

<title>:: 스토브리그 ::</title>

<style type="text/css">

/* image-orientation:from-image; */

/* 포스팅 작성일 기준으로 파이어 폭스만 가능 */

</style>

</head>

<body>

<img src="stoveleague.jpg"/>

</body>

</html> 




# 출력결과




회전 정보 : 90° CW가 반영이 <img> 태그를 사용한 경우


브라우저에서 다시 정방향으로 돌려서 출력하는 모습을 확인 할 수 있다.


그렇지만 그냥 브라우저상에서 이미지 경로를 직접 입력하여 호출하는 경우


위 출력결과처럼 




현재 파이어 폭스 브라우저의경우 CSS에 image-orientation:from-image; 를 넣어주는 것만으로도


회전정보 값을 읽어들여 <img> 태그에 반영할 수 있지만


아직까지 크롬등의 다른 브라우저에서는 CSS4의 실험적 기능이기에 적용되어 있지 않다고 한다.


결국 자동으로 이러한 상황을 해결 할 수는 없는 상황이기에


사용자의 폰, 찍은 각도에 따라 업로드시 문제가 발생할 수 있다.









GitHub : https://github.com/exif-js/exif-js





■ EXIF-JS를 이용하여, 이미지 파일의 EXIF 정보 가져오기




예제 진행하기에 앞서 아래와 같이 스마트폰으로 촬영한 이미지 파일 하나의


ORIENTATION( 회전 정보 )를 변경하여 아예 이미지를 뒤집어 보자.





해당 포스팅의 예제와 바로 이어지는 예제는


위와 같이 준비한 이미지로 진행을 해보자.




# 소스코드

<html>
<head>
<title>:: JavaScript 이미지 EXIF 정보 추출 ::</title>
<style type="text/css">
    table {
        border-collapse:collapse;
        border:1px #000000 solid;
        width:100%;
    }

    table > thead > tr > th {
        background-color:#FFC0CB;
    }

    table > tbody > tr > td:nth-child(odd) {
        text-align:center;
    }

    table > tbody > tr > td:nth-child(even) {
        padding-left:10px;
    }

    #thumbnailImg {
        width:100%;
        height:auto;
    }
</style>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/exif-js"></script>
<script type="text/javascript">
    function uploadImgPreview() {

        // @breif 업로드 파일 읽기
        const fileInfo = document.getElementById( "upImgFile" ).files[0];
        const reader = new FileReader();

        // @details readAsDataURL( )을 통해 파일을 읽어 들일때 onload가 실행
        reader.onload = function() {

            EXIF.getData(fileInfo, () => {

                const tags = EXIF.getAllTags( fileInfo );

                for( let key in tags ) {

                    // @details 화면에 출력할 메타데이터 정보 테이블 행( row )을 만든다.
                    document.querySelector( "tbody" ).appendChild( document.createElement( "tr" ) );

                    // @breif 메타 데이터 : 키
                    let colKey = document.createElement( "td" );
                    colKey.innerText = key;
                    document.querySelector( "tbody > tr:last-child" ).appendChild( colKey );

                    // @breif 메타 데이터 : 값
                    let colData = document.createElement( "td" );
                    colData.innerText = JSON.stringify( tags[key], null, "\t" );
                    document.querySelector( "tbody > tr:last-child" ).appendChild( colData );
                }
            });

            // @details 파일의 URL을 Base64 형태로 가져온다.
            document.getElementById("thumbnailImg").src = reader.result;
        };

        if( fileInfo ) {

            // @details readAsDataURL( )을 통해 파일의 URL을 읽어온다.
            reader.readAsDataURL( fileInfo );
        }
    }
</script>
</head>
<body>
    <!-- @breif accept 태그는 파일 업로드시 그것을 이미지 파일로 제한한다. -->
    <input type="file" id="upImgFile" onChange="uploadImgPreview();" accept="image/*">
    <hr/>
    <img id="thumbnailImg" src="">
    <hr/>
    <table border="1">
        <thead>
            <tr>
                <th>메타</th>
                <th>값</th>
            </tr>
        </thead>
        <tbody></tbody>
    </talbe>
</body>
</html>




# 출력결과










참고 : https://www.impulseadventure.com/photo/exif-orientation.html





■ <IMG> TAG에 ORIENTATION 으로 축 보정하기





그럼 이제 이미지 EXIF 정보에서 Orientation 정보를 가지고 와서 이미지를 처음 사진이 적용되었을 때와 같은 결과를 만들어보자.








내가 변경한 ORIENTATION 정보에 맞추어서 강제로 변경을 해보는 것이다.





# 소스코드

<html>
<head>
<title>:: JavaScript 이미지 EXIF 정보 추출 ::</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/exif-js"></script>

<script type="text/javascript">
    function uploadImgPreview() {

        // @breif 업로드 파일 읽기
        const fileInfo = document.getElementById( "upImgFile" ).files[0];
        const reader = new FileReader();

        // @details readAsDataURL( )을 통해 파일을 읽어 들일때 onload가 실행
        reader.onload = function() {

            console.log( reader.result );
            document.getElementById( "thumbnailImg" ).src = reader.result;

            EXIF.getData( fileInfo, () => {

                const orientation = EXIF.getTag( fileInfo, "Orientation" );
                console.log( orientation );

                switch( orientation ) {

                    // @details 이미지 회전값이 0인경우 ( 정방향 )
                    case 1 :
                        document.getElementById( "thumbnailImg" ).style.transform = "rotate( 0deg )";
                        break;

                    // @details 이미지 회전값이 180 기운 경우
                    case 3 :
                        document.getElementById( "thumbnailImg" ).style.transform = "rotate( 180deg )";
                        break;

                    // @details 이미지 회전값이 270 기운 경우 ( 왼쪽으로 90 기운 경우 )
                    case 6 :
                        document.getElementById( "thumbnailImg" ).style.transform = "rotate( 90deg )";
                        break;

                    // @details 이미지 회전값이 90 기운 경우
                    case 8 :
                        document.getElementById( "thumbnailImg" ).style.transform = "rotate( 270deg )";
                        break;
                }
            });
        };

        if( fileInfo ) {


            // @details readAsDataURL( )을 통해 파일의 URL을 읽어온다.
            reader.readAsDataURL( fileInfo );
        }
    }
</script>
</head>
<body>
    <!-- @breif accept 태그는 파일 업로드시 그것을 이미지 파일로 제한한다. -->
    <input type="file" id="upImgFile" onChange="uploadImgPreview();" accept="image/*">
    <h3># EXIF - Orientation 값 적용 </h3>
    <hr/>
    <img id="thumbnailImg" src="" style="width:100%;height:auto;">
    <hr/>
    <h3># 다이렉트로 띄우기</h3>
    <img src="./DSC_IMG.jpg" style="width:100%;height:auto;">
</body>
</html>





# 출력결과









Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[JavaScript] 이미지 파일 업로드하고 썸네일 생성하기[JavaScript] 이미지 파일 업로드하고 썸네일 생성하기

Posted at 2020. 3. 25. 18:35 | Posted in JavaScript & jQuery/JavaScript




참고 : https://developer.mozilla.org/ko/docs/Web/API/FileReader

참고 : https://developer.mozilla.org/ko/docs/Web/API/FileList

참고 : https://developer.mozilla.org/ko/docs/Web/API/FileReader/readAsDataURL

참고 : https://developer.mozilla.org/ko/docs/Web/HTTP/Basics_of_HTTP/MIME_types





■ FileReader 메소드




속성

설 명

 FileReader.error

 · DOMError 파일을 읽는 도중에 발생한 에러를 나타낸다.

 FileReader.readyState

 · FileReader의 상태를 나타내는 숫자

   ① EMPTY : 0  ( 아직 데이터가 로드 되지 않았음 )

   ② Loading : 1 ( 데이터가 로딩 중 )

   ③ DONE : 2 ( 모든 읽기 요청이 완료됨 )

 FileReader.result

 · 파일의 컨텐츠

 · result 속성은 읽기 작업이 완료되고 읽기 작업의 초기화에 사용한 방식으로 결정된

  데이터의 포맷이 정해진 후에 유효하다.

 FileReader.onabort

 · onabort 이벤트는 읽기 동작이 중단 될 때마다 발생한다.

 · abort 이벤트의 핸들러

 FileReader.onerror

 · onerror 이벤트는 읽기 동작에 에러가 생길 때마다 발생한다.

 · error 이벤트이 핸들러

 FileReader.onload

 · onload 이벤트는 읽기 동작이 성공적으로 완료 되었을 때마다 발생한다.

 · load 이벤트 핸들러

 FileReader.onloadstart

 · onloadstart 이벤트는 읽기 동작이 실행 될 때마다 발생한다.

 · loadstart 이벤트 핸들러

 FileReader.onloadend

 · onloadend 이벤트는 읽기 동작이 끝났을 때마다 발생한다.( 읽기의 성공 이나 실패 여부는 상관 없다. )

 · loadend 이벤트 핸들러

 FileReader.onprogress

 · onprogress 이벤트는 Blob 컨테트를 읽는 동안 호출된다.

 · progress 이벤트 핸들러



※ Blob란?


Blob 객체는 파일류의 불변하는 미가공 데이터를 나타낸다.

텍스트와 이진 데이터 형태로 읽을 수 있으며, ReadableStream으로 변환한 후 그 메서드를 사용 데이터를 처리할 수 도 있다.


Blob은 JavaScript 네이티브 형태가 아닌 데이터도 표현할 수 있다.

File 인터페이스는 사용자 시스템의 파일을 지원하기 위해 Blob 인터페이스를 확장한 것이므로, 모든 블롭 기능을 상속한다.









■ 이미지 파일 업로드하고 썸네일 출력하기





# 소스코드

<html>

<head>

<title>:: JavaScript 파일 썸네일 추출 ::</title>

<script type="text/javascript">

    function uploadImgPreview() {


    // @breif 업로드 파일 읽기

    let fileInfo = document.getElementById("upImgFile").files[0];

    let reader = new FileReader();

        // @details readAsDataURL( )을 통해 파일을 읽어 들일때 onload가 실행

        reader.onload = function() {

       

            // @details 파일의 URL을 Base64 형태로 가져온다.

            document.getElementById("thumbnailImg").src = reader.result;

            document.getElementById("thumbnailUrl").innerText = reader.result;

        };


        // @details onload 대신 addEventListener( ) 사용가능

    // reader.addEventListener("load", function() {

        //    document.getElementById("thumbnailImg").src = reader.result;

        //    document.getElementById("thumbnailUrl").innerText = reader.result;

    // }, false);

    if( fileInfo ) {

   

            // @details readAsDataURL( )을 통해 파일의 URL을 읽어온다.

            reader.readAsDataURL( fileInfo );

        }

    }

</script>

</head>

<body>

    <!-- @breif accept 태그는 파일 업로드시 그것을 이미지 파일로 제한한다. -->

    <input type="file" id="upImgFile" onChange="uploadImgPreview();" accept="image/*">

    <hr/>

    <img id="thumbnailImg" src="">

    <br/>

    <div id="thumbnailUrl"></div>

</body>

</html> 





# 출력결과











■ 여러장의 이미지 업로드하고 화면에 나타내기





# 소스코드

<html>

<head>

<title>:: JavaScript 파일 썸네일 추출 ::</title>

<script type="text/javascript">

    function uploadImgPreview() {


    // @breif 업로드 파일 읽기

    let fileList = document.getElementById( "upImgFiles" ).files;


// @breif 업로드 파일 읽기

function readAndPreview( fileList ) {


// @breif 이미지 확장자 검사

if ( /\.(jpe?g|png|gif)$/i.test( fileList.name ) ) {


let reader = new FileReader();


reader.addEventListener( "load", function() {


let image = new Image();


image.width = "264";

image.height = "264";

image.title = fileList.name;

image.src = this.result;


// @details 이미지 확장자 검사

document.getElementById( "thumbnailImgs" ).appendChild( image );


}, false );


// @details readAsDataURL( )을 통해 파일의 URL을 읽어온다.

if( fileList ) {

reader.readAsDataURL( fileList );

}

}

}


    if( fileList ) {


                // @details readAndPreview() 함수를 forEach문을통한 반복 수행

[].forEach.call( fileList, readAndPreview );

        }

    }

</script>

</head>

<body>

    <!-- @breif accept 태그는 파일 업로드시 그것을 이미지 파일로 제한한다. -->

    <input type="file" id="upImgFiles" onChange="uploadImgPreview();" accept="image/*" multiple>

    <hr/>

    <div id="thumbnailImgs"></div>

</body>

</html> 





# 출력결과






관련포스팅#01 : [JavaScript] 이미지 파일 썸네일 생성하기

관련포스팅#02 : [JavaScript] Canvas를 통한 이미지 회전

관련포스팅#03 : [JavaScript] Canvas로 이미지 서버에 전송하기 - Sample

관련포스팅#04 : [jQuery] JCROP을 이용한 이미지 자르기 - Sample






Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[JavaScript] Canvas로 이미지 서버에 전송하기 - Sample[JavaScript] Canvas로 이미지 서버에 전송하기 - Sample

Posted at 2020. 3. 6. 17:38 | Posted in JavaScript & jQuery/JavaScript




참고 : https://bugsdb.com/_ko/debug/14292f07a628fd12f3b6afc4a751f956






■ 캔버스로 생성한 이미지 파일 서버에 업로드 하기




# 소스코드 - 클라이언트 페이지 ( 이미지 전송 )

 canvas_upload.php

<html>

<head>

<meta charset="UTF-8">

<title>:: JavaScript 캔버스 이미지 업로드 ::</title>

<meta name="viewport" content="width=device-width">

<link type="text/css" rel="stylesheet" href="./css/modern.css"/>

<style type="text/css">

    .imgArea { text-align:center; }

    canvas, #uploadFile, #submitBtn { display:none; }

</style>

<script type="text/javascript">


    // @breif AJAX 통신 함수

    function getXMLHTTPRequest() {

        let request = false;

        try { request = new XMLHttpRequest(); }

        catch(err01) {

            try { request = new ActiveXObject("Msxml2.XMLHTTP"); }

            catch(err02) {

                try { request = new ActiveXObject("Microsoft.XMLHTTP"); }

                catch(err03) { request = false; }

            }

        }

        return request;

    }


    const ajax = getXMLHTTPRequest();


    // @breif 이미지 업로드 함수

    function uploadImgFilePrinted() {


        // @details 업로드 파일 정보를 받아온다.

        let fileInfo = document.getElementById("uploadFile").files[0];

        let reader = new FileReader();


        reader.onload = function() {


            // @details 업로드 버튼 이미지의 넓이와 높이에 맞게 썸네일을 생성을 위해 그 값을 받아온다.

            const btnWidth = document.getElementById("uploadImg").width;

            const btnHeight = document.getElementById("uploadImg").height;


            // @details 업로드 이미지 출력

            document.getElementById("uploadImg").src = reader.result;

            document.getElementById("uploadImg").width = btnWidth;

            document.getElementById("uploadImg").height = btnHeight;


            // @details 등록버튼 노출

            document.querySelector("#submitBtn").style.display = "inline";

        };


        if(fileInfo) {

            // @details readAsDataURL을 통해 업로드한 파일의 URL을 읽어 들인다.

            reader.readAsDataURL(fileInfo);

        }

    }


    function registryUploadImg() {

        if(confirm("업로드한 이미지를 업로드 하시겠습니까?") == true) {


            let upImage = new Image();

            upImage.src = document.getElementById("uploadImg").src;


            upImage.onload = function() {


                // @breif 캔버스 위에 이미지 그리기

                let canvas = document.querySelector("canvas");

                let canvasContext = canvas.getContext("2d");


                // @details 리사이즈할 이미지의 크기는, 현재 클라이언트에게 노출되어 있는 이미지 크기로 지정

                const btnWidth = document.getElementById("uploadImg").width;

                const btnHeight = document.getElementById("uploadImg").height;


                // @details 캔버스 생성 및 이미지 그리기

                canvas.width = btnWidth;

                canvas.height = btnHeight;

                canvasContext.drawImage(this, 0, 0, btnWidth, btnHeight);


                // @details AJAX 전송 데이터 설정

                const arrData =  {

                      "mode" : "imgFileUpload"

                    , "imgBase64" : canvas.toDataURL("image/jpeg")

                    , "imgFileName" : document.getElementById("uploadFile").files[0]['name']

                };


                ajax.open("POST", "./upload_image.php", true); // @details 비동기 방식 사용

                ajax.setRequestHeader("Content-Type", "application/json;charset=UTF-8;");

                ajax.send(JSON.stringify(arrData));


                ajax.onreadystatechange = function() {

                    if(ajax.readyState == 4) {

                        if(ajax.status == 200) {

                            const json = JSON.parse(ajax.responseText);

                            if(json.ret == "success") {

                                alert(json.message);

        } else {

                                alert(json.message);

                            }

                        } else {

                            alert(json.message);

                        }

                    }

                };

            };


        } else {

            return false;

        }

    }

</script>

<link rel="import" href="/edit_img.html">

</head>

<body>

<div class="windowFilm"></div>

<form id="uploadFrom" method="post">

    <input type="file" id="uploadFile" onChange="uploadImgFilePrinted();" accept="image/*"/>

    <div class="contents">

        <h1>캔버스&nbsp;업로드<span>샘플</span></h1>

        <div class="imgArea">

            <a href="javascript:;" onClick="document.getElementById('uploadFile').click();">

                <img id="uploadImg" src="./user-anonymous.png"/>

            </a>

            <br/><br/>

            <input id="submitBtn" type="button" onClick="registryUploadImg();" value="등록">

        </div>

        <canvas></canvas>

        <div class="copyright" style="bottom:0;">

            <p>Producer &copy; 사악미소</p>

        </div>

    </div>

</form>

</body>

</html> 




# 소스코드 - 서버 ( 이미지 파일 저장 )

 upload_image.php

<?php

$RetVal = array("ret"=>"fail", "error"=>"", "error_msg"=>"", "message"=>"");

$backUrl = $_SERVER['HTTP_REFERER'];


// @breif php://input은 내용의 유형에 관계없이 요청 HTTP 헤더 뒤에 모든 원시 데이터를 반환한다.

$data = json_decode(file_get_contents("php://input"), true);


switch($data['mode']) {


    // @breif ajax 이미지 업로드

    case "imgFileUpload" :


        // @breif base64로 암호화된 이미지 파일명 디코드

        $uploadCanvas = base64_decode(preg_replace("#^data:image/\w+;base64,#i", "", $data['imgBase64']));


        // @breif 파일명과 확장자를 분리 하여 담는다.

        $fileName = array_shift(explode(".", $data['imgFileName'])); // @details 이미지 파일 이름


        // @breif 이미지 파일명 변경

        $uploadImgName = $fileName."_".time().".jpg";


        // @breif 업로드할 이미지 경로 설정

        $uploadSrc = "./upload/".$uploadImgName;


        // @breif 이미지 파일 저장

        file_put_contents($uploadSrc, $uploadCanvas);


        // @breif 성공 여부 확인

        if(file_exists($uploadSrc) == TRUE) {

            $RetVal['ret'] = "success";

            $RetVal['message'] = "파일을 업로드 하는데 성공하였습니다.\n축하합니다.";

        } else {

            $RetVal['message'] = "파일을 업로드 하는데 실패하였습니다.\n다시 시도하여 주시기 바랍니다.";

        }


// @return 업로드 성공 / 실패 유무를 json 방식으로 웹 페이지에 전달한다.

        print json_encode($RetVal);

        return;


    break;


    default :


    $RetVal['message'] = "서버와의 연결 실패";

    print json_encode($RetVal);

        return;


    break;

}


header("location:".$backUrl);

?>





# 출력결과







관련포스팅#01 : [JavaScript] 이미지 파일 썸네일 생성하기

관련포스팅#02 : [JavaScript] Canvas를 통한 이미지 회전

관련포스팅#03 : [JavaScript] Canvas로 이미지 서버에 전송하기 - Sample

관련포스팅#04 : [jQuery] JCROP을 이용한 이미지 자르기 - Sample










Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[JavaScript] Canvas를 통한 이미지 회전[JavaScript] Canvas를 통한 이미지 회전

Posted at 2020. 3. 4. 11:06 | Posted in JavaScript & jQuery/JavaScript




■ 휴대폰 사진 업로드시 이미지가 가로, 세로가 변경되는 이유





휴대폰, 스마트폰의 카메라로 찍은 사진을 웹 브라우저를 통해 업로드 할경우,


이미지의 가로, 세로가 변경되어 등록되는 경우가 존재한다.


이러한 이유는 EXIF( Exchangeable Image File Format ) 의


회전값 변경이 반영되지 않기에 생기는 이유인데.



아래 이미지는 초기 스마트 폰에서 자주 볼 수 있었던 문제이다.

( 자이로 센서( Gyro Sensor ) 등의 기술 발전으로 이런 문제는 많이 해결 되었지만, 이미지의 편집등 다른 작업 과정으로 현재에도 이런 문제를 맏닥드릴 수 있다. )









가로로 찍은 이미지의 경우 스마트폰 상에서는 분명 정상적으로 보여주지만.


실제 이미지의 EXIF 값을 보면 회전정보( Orientation )가 90° CW 가 적용되어 있는것을 알 수 있다.


이를 회전정보 값을 브라우저에서는 인식하지 않고 보여지는 문제이다.







   # EXIF( Exchangeable Image File Format ) 란?



   디지털 카메라 등에서 사용되는 이미지 파일 메타데이터 포맷으로,


   카메라가 촬영한 사진, 녹음파일에 시간 등의 각종 정보를 담기 위해 개발되었다. 즉, 


   JPEG, TIFF 6.0과 RIFF, WAV 포맷에 이미지나 소리에 대한 정보를 추가로 기록할 수 있다.


   디지털카메라의 보급으로 널리 활성화되었고 이미지 메타데이터의 사실상 표준 지위에 있다.


   EXIF 데이터는 이미지 파일의 일부로 저장되며,


   EXIF 데이터를 지원하는 소프트웨어 사용 시 이미지를 변경해도 데이터를 보존한다.



   출처 : 나무위키( https://namu.wiki/w/EXIF )






간단하게 이미지 파일 하나를 선택하여 마우스 오른쪽 버튼을 클릭하고


오른쪽으로 회전( T ) 을 선택해 보자.





회전 정보 : 90° CW 로 반영된 것을 확인할 수 있다.


이 렇게 회전된 파일을 <img src="스토브리그.jpg">로 올려서 브라우저로 확인을 해 본다면.



# 소스코드

<html>

<head>

<title>:: 스토브리그 ::</title>

<style type="text/css">

/* image-orientation:from-image; */

</style>

</head>

<body>

<img src="stoveleague.jpg"/>

</body>

</html> 



# 출력결과




회전 정보 : 90° CW가 반영이 <img> 태그를 사용한 경우


브라우저에서 다시 정방향으로 돌려서 출력하는 모습을 확인 할 수 있다.




현재 파이어 폭스 브라우저의경우 CSS에 image-orientation:from-image; 를 넣어주는 것만으로도


회전정보 값을 읽어들여 반영하여 이미지가 돌아가는 것을 막아주어서 해결할 수 있지만.


아직까지 크롬등의 다른 브라우저에서는 CSS4의 실험적 기능이기에 적용되어 있지 않다고 한다.


결국 자동으로 이러한 상황을 해결 할 수는 없는 상황이기에


사용자의 폰, 찍은 각도에 따라 업로드시 문제가 발생할 수 있다.











■ 캔버스를 통한 업로드 이미지 각도 조정




그래서 필자는 이에대한 해결책으로


자동으로 이미지를 보정하는 것이 아닌,


사용자가 직접 수동으로 이미지를 수정하는 방향으로 가닥을 잡고,


다 완성된 정보만을 서버로 전달하는 형태로 취하는 방식을 택하게 되었다.




# 소스코드

<html>

<head>

<title>:: JavaScript 캔버스 - 회전 ::</title>

<script type="text/javascript">


    function uploadImgPreview() {


     // @breif 업로드 파일 읽기

     let fileInfo = document.getElementById("upImgFile").files[0];

     let reader = new FileReader();


     reader.addEventListener("load", function() {


          console.log("INDEX #02");


          // @details 업로드한 파일의 URL을 가져온다.

          document.getElementById("thumbnail").src = reader.result;


     }, false);


     if(fileInfo) {


          console.log("INDEX #01");


          // @details readAsDataURL을 통해 업로드한 파일의 URL을 읽어 들인다.

          reader.readAsDataURL(fileInfo);

        }

    }


    function rotateCanvasImg( angle ) {


     // @breif 썸네일 이미지 생성

    let tempImage = new Image();                         // @details drawImage 메서드에 넣기 위해 이미지 객체화

        tempImage.src = document.getElementById("thumbnail").src; // @details 업로드 완료된 이미지를 객체에 주입


     tempImage.onload = function() {


          // @breif 캔버스 위에 이미지 그리기

          let canvas = document.getElementById("canvas");

          let canvasContext = canvas.getContext("2d");


          // @breif 왼쪽( 270° ) 회전의 경우

          if( angle == '270' ) {


               // @details 270° 회전의 경우 이미지의 높이와 넓이를 서로 바꿔준다.

               canvas.width = tempImage.height;

canvas.height = tempImage.width;


               canvasContext.rotate((270) * Math.PI / 180);


               // @details 이미지가 270° 회전 했을 경우 x축의 값을 업로드 이미지의 넓이를 음수로 변경한다.

               canvasContext.drawImage(this, (tempImage.width * -1), 0);


          }


// @breif 오른쪽( 90° ) 회전의 경우

          else if( angle == '90' ) {


               // @details 90° 회전의 경우 이미지의 높이와 넓이를 서로 바꿔준다.

               canvas.width = tempImage.height;

canvas.height = tempImage.width;


               // canvasContext.rotate((90) * Math.PI / 180);

               canvasContext.rotate(Math.PI / 2);


               // @details 이미지가 90° 회전 했을 경우 y축의 값을 업로드 이미지의 높이 음수로 변경한다.

canvasContext.drawImage(this, 0, (tempImage.height * -1));


          }


          // @breif 거꾸로( 180° ) 회전의 경우

          else if( angle == '180' ) {


               canvas.width = tempImage.width;

               canvas.height = tempImage.height;


               // canvasContext.rotate((180) * Math.PI / 180);

               canvasContext.rotate(Math.PI);


               // @details 이미지가 180° 회전 했을 경우 x, y축의 값을 업로드 이미지의 넓이와 높이 음수로 변경한다.

               canvasContext.drawImage(this, (tempImage.width * -1), (tempImage.height * -1));


          }


          // @breif 정방향

          else {


               canvas.width = tempImage.width;

               canvas.height = tempImage.height;

               canvasContext.drawImage(this, 0, 0);

          }


          // @breif 캔버스의 이미지

          let dataURI = canvas.toDataURL("image/jpeg");

          document.querySelector("#thumbnail").src = dataURI;


     };

    }

</script>

</head>

<body>

    <!-- @breif accept 태그는 파일 업로드시 그것을 이미지 파일로 제한한다. -->

    <input type="file" id="upImgFile" onChange="uploadImgPreview();" accept="image/*">

    &nbsp;|&nbsp;

    <input type="button" onClick="rotateCanvasImg('270');" value="왼쪽(270°)"/>

    &nbsp;|&nbsp;

    <input type="button" onClick="rotateCanvasImg('90');" value="오른쪽(90°)"/>

    &nbsp;|&nbsp;

    <input type="button" onClick="rotateCanvasImg('180');" value="거꾸로(180°)"/>

    &nbsp;|&nbsp;

    <input type="button" onClick="uploadImgPreview();" value="되돌리기"/>

    <hr/>

    <img id="thumbnail" src="">

    <!-- @breif 캔버스는 화면에 노출시키지 않는다. -->

    <canvas id="canvas" style="display:none;"></canvas>

</body>

</html>




# 출력결과




이렇게 이미지 조작이 완료되었다면.


해당 미지를 마우스 우클릭으로 다운받아 보자.








다운받은 이미지는 index.jpg 라는 이름으로 생성되며


회전 정보가 표기되지 않는 0° CW 임을 알 수 있다.


그렇기에 해당 이미지를 <img> TAG를 사용해도 원하는 각도 조절이 가능하기에




사용자의 업로드한 사진의 이미지 축 보정 작업이 끝나고 사진 등록( 파일 업로드 )을 실행하면


편집된 캔버스의 작업내용을 서버에 전송하는 형태로 진행을 하면 된다.






관련포스팅#01 : [JavaScript] 이미지 파일 썸네일 생성하기

관련포스팅#02 : [JavaScript] Canvas를 통한 이미지 회전

관련포스팅#03 : [JavaScript] Canvas로 이미지 서버에 전송하기 - Sample

관련포스팅#04 : [jQuery] JCROP을 이용한 이미지 자르기 - Sample







  1. 비밀댓글입니다

Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[JavaScript] 업로드한 파일 Resizer 하여 화면에 출력시키기[JavaScript] 업로드한 파일 Resizer 하여 화면에 출력시키기

Posted at 2020. 3. 4. 07:34 | Posted in JavaScript & jQuery/JavaScript




업로드한 파일 리사이즈 하여 화면에 출력시키기




<html>

<head>

<title>:: JavaScript 캔버스 - 뷰 ::</title>

<style type="text/css">

table {

            border:1px solid #444444;

            border-collapse:collapse;

  }

table th {

            border:1px solid #444444;

            padding:5px 10px 5px 10px;

            text-align:center;

            font-weight:bold;

}

table td {

            border:1px solid #444444;

            padding:10px;

            text-align:center;

  }

</style>

<script type="text/javascript">


    function uploadImgPreview() {


        // @breif 업로드 파일 읽기

        let fileInfo = document.getElementById("upImgFile").files[0];

        let reader = new FileReader();


        // @details INDEX #01 실행 이후, 파일의 업로드( onload )가 확인되고 나서 실행된다.

        reader.onload = function() {


            console.log( "INDEX #02" );


            // @details 업로드한 파일의 URL을 가져온다.

            document.getElementById("preview").src = reader.result;


            // @breif 썸네일 이미지 생성

            let tempImage = new Image();    // @details drawImage 메서드에 넣기 위해 이미지 객체화

            tempImage.src = reader.result;    // @details data-uri를 이미지 객체에 주입


            tempImage.addEventListener("load", function() {


                // @breif 캔버스 위에 이미지 그리기

                let canvas = document.getElementById( "canvas" );

                let canvasContext = canvas.getContext( "2d" );

                // @breif 캔버스 크기 셋팅

                canvas.width = 240;

                canvas.height = 300;

                // @breif 캔버스 위에 이미지 그리기

                canvasContext.drawImage(

                  this // @details 업로드한 이미지 파일의 정보

                , -10 // @details X좌표

                , -10 // @details Y좌표

                , 270 // @details 넣을 이미지의 가로 사이즈( 해당 예제는 변화를 보기위해 살짝 크게 다. )

                , 330 // @details 넣을 이미지의 세로 사이즈( 해당 예제는 변화를 보기위해 살짝 크게 했다. )

                );

                

                // @breif 캔버스 위에 이미지 그리기

                canvasContext.stroke();

                

                // @breif 캔버스의 이미지 URL 정보를 받아 썸네일 출력

                let dataURI = canvas.toDataURL("image/jpeg");

                document.querySelector("#thumbnail").src = dataURI;

            });

        };


        if( fileInfo) {


            console.log( "INDEX #01" );


            // @details readAsDataURL을 통해 업로드한 파일의 URL을 읽어 들인다.

            reader.readAsDataURL(fileInfo);

        }

    }


</script>

</head>

<body>

     <!-- @breif accept 태그는 파일 업로드시 그것을 이미지 파일로 제한한다. -->

    <input type="file" id="upImgFile" onChange="uploadImgPreview();" accept="image/*">

    <hr/>

    <table>

<tr>

<th>업로드 이미지 출력</th>

<th>이미지 캔버스 출력</th>

</tr>

<tr>

<td rowspan="3"><img id="preview" src=""></td>

<td><canvas id="canvas"></canvas></td>

</tr>

<tr>

<th>캔버스 이미지 변환</th>

</tr>

<tr>

<td><img id="thumbnail" src=""></td>

</tr>

    </table>

</body>

</html> 







① 이미지 파일을 업로드 한다.


② 업로드한 이미지를 화면에 출력한다.


③ 지정한 캔버스 영역에 해당 이미지를 그대로 리사이징 하여 따라 그리는 작업을 수행한다.

    ( 이때 기본적으로 이미지는 *.png 파일로 생성된다. )


④ 마지막으로 캔버스의 이미지 파일을 그대로 다시 이미지로 출력시키는 작업을 수행한다.







사실 필자가 해당 글을 작성하게 된 경위는


[JavaScript] Canvas를 통한 이미지 회전 포스팅의 사전 준비 과정이었다.


캔버스를 통해 프론트 개발의 좀더 넓은 시각을 바라보고.


HTML5의 가능성에 대해서 좀더 알아봐야 겠다는 생각을 하고 있다.











Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[JavaScript] getElementByTagName( ) 메소드[JavaScript] getElementByTagName( ) 메소드

Posted at 2020. 2. 28. 13:54 | Posted in JavaScript & jQuery/JavaScript




발췌 : 하루 10분씩 핵심만 골라 마스터하는 Ajax





■ documet.getElementByTagName( ) 메소드





getElementByTagName( ) 메소드를 이용하면 각각의 태그 명을 통해서


문서안의 요소들에 대해서 자바스크립트 배열을 만들 수 있다.


자바스크립트 코드에서 다음과 같이 문서 안의 요소에 접근을 할 수 있다.




# 소스코드

<html>

<head>

<title>:: JavaScript - getElementsByTagName ::</title>

<script type="text/javascript">

    document.addEventListener("DOMContentLoaded", function() {


        const txtElements = document.getElementsByTagName("input")[0].value;

        alert( txtElements );


    });

</script>

</head>

<body>

    <input type="text" value="누구나 그럴싸한 계획을 갖고 있다.\n치명타에 세 번 연속으로 처맞기 전까지는. 으하하하하하하하"/>

</body>

</html>




# 출력결과









이 코드는 block 이라는 태그 이름을 가진 모든 요소들을 blocks 라는 변수에 배열 형식으로 반환하는 코드이다.


다음 코드처럼 다른 일반 배열과 같은 방식으로 배열의 크기를 알 수 있다.

( 인자로 주어진 태그 이름과 같은 요소들의 개수를 의미한다. )



# 소스코드

<html>

<head>

<title>:: JavaScript - getElementsByTagName ::</title>

<script type="text/javascript">

    document.addEventListener("DOMContentLoaded", function() {


        const blocks = document.getElementsByTagName( "block" );

        alert( blocks.length );


    });

</script>

</head>

<body>

    <block>1번 블럭</block>

    <block>2번 블럭</block>

    <block>3번 블럭</block>

    <block>4번 블럭</block>

    <block>5번 블럭</block>

    <block>6번 블럭</block>

    <block>7번 블럭</block>

</body>

</html>




# 출력결과










배열의 각각의 요소에 대해서도 접근할 수 있다.


bean이라는 이름을 가진 두 번째 요소에 대해서 접근할 경우


bean[1]로 접근이 가능하다.




# 소스코드

<html>

<head>

<title>:: JavaScript - getElementsByTagName ::</title>

<script type="text/javascript">

    document.addEventListener("DOMContentLoaded", function() {


        const bean = document.getElementsByTagName("bean")[1];

        alert( bean.innerHTML );


    });

</script>

</head>

<body>

    <bean>임요환</bean>

    <bean>홍진호</bean>

    <bean>강   민</bean>

</body>

</html> 




# 출력결과







Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[JavaScript] INPUT TYPE FILE 썸네일 생성[JavaScript] INPUT TYPE FILE 썸네일 생성

Posted at 2020. 1. 16. 10:27 | Posted in JavaScript & jQuery/JavaScript


작성중

Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[JavaScript] 파일업로드시 용량 검사하기[JavaScript] 파일업로드시 용량 검사하기

Posted at 2019. 12. 26. 11:25 | Posted in JavaScript & jQuery/JavaScript



참고 : https://zzznara2.tistory.com/617




■ 파일업로드시 용량 검사하기




# 소스코드

<html>

<head>

<title>:: JAVASCRIPT 파일업로드 ::</title>

<script type="text/javascript">

    function imgFileUpload() {


        /// @brief 업로드할 이미지의 크기( Byte )를 구해온다.

        const imgSize = document.getElementById("personImg").files[0].size;


        /// @brief 업로드할 이미지 사이즈의 크기는 4MB 이하로 설정

        const maxSize = 4 * 1024 * 1024;


        /// @brief 이미지

        if(imgSize > maxSize) {


            alert("첨부할 수 있는 이미지 파일은 4MB 이하여야 합니다.");

            document.getElementById("personImg").focus();

            return false;


        } else {


            alert("업로드 가능한 이미지입니다.");


        }

    }

</script>

</head>

<body>

<form enctype="multipart/form-data" id="upFrm" method="post">

    <input type="file" id="personImg" name="personImg" value=""/>

    <input type="button" onClick="imgFileUpload();" value="업로드"/>

</form>

</body>

</html>




# 출력결과 - 수정예정






관련문서 : [JavaScript] 파일업로드시 확장자 검사하기







Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[JavaScript] 체크박스 전체 선택 - Sample[JavaScript] 체크박스 전체 선택 - Sample

Posted at 2019. 12. 19. 11:34 | Posted in JavaScript & jQuery/JavaScript




■ 전체영역을 선택하는 체크박스 샘플 코드




# 소스코드

<html>

<head>

<title>:: JavaScript 체크박스 ::</title>

<script type="text/javascript">


    // @command 전체선택

    function allCheckedBox(obj) {


        // @brief 선택한 체크박스의 클래스 명칭을 가져온다.

        const termClassobj.getAttribute("class");


        // @brief 선택한 클래스명과 같은 클래스의 갯수

        console.log(document.getElementsByClassName(termClass).length);


        Array.prototype.forEach.call(document.getElementsByClassName(termClass), function(element, index, array) {


            // @brief 엘리먼트의 값 출력

            console.log(element.value);


            // @brief 선택한 클래스의 첫번째 checkbox의 상태가 체크가 되있는 경우

            if(document.getElementsByClassName(termClass)[0].checked == true) {


                // @brief 같은 클래스명을 가진 모든 checkbox의 상태를 선택 완료 처리 한다.

                element.checked = true;

            }


            // @brief 선택한 클래스의 첫번째 checkbox의 상태가 체크가 해제된 경우

            else {


                // @brief 같은 클래스명을 가진 모든 checkbox의 상태를 선택 해제 처리 한다.

                element.checked = false;

            }

        });

    }


    // @command 개별 선택이 이루어진 경우에 전체값 체크의 예외처리

    function eachCheckedBox(obj) {


        // @brief 선택한 체크박스의 상태가 선택해제인 경우

        if(obj.checked == false) {


            // @brief 선택한 체크박스의 클래스 명칭을 가져온다.

            const termClass = obj.getAttribute("class");


            // @brief 첫번째 checkbox의 상태가 체크가 되어있는경우

            if(document.getElementsByClassName(termClass)[0].checked == true) {


                // @brief 첫번째 checkbox의 상태를 체크해제한다.

                document.getElementsByClassName(termClass)[0].checked = false;

            }

        }

    }

</script>

</head>

<body>

     <h1>■ 체크박스 전체 선택 - SAMPLE</h1>


    <!-- @brief 전체의 선택의 경우 반드시 index값이 0인 첫번째에 위치해야 한다. -->

    <label>

        <input type="checkbox" class="neHeros" value="" onChange="allCheckedBox(this);"/>&nbsp;전체

    </label>


    <!-- @brief 개별선택될 체크박스들 -->

    <label>

        <input type="checkboxclass="neHeros" value="D" onChange="eachCheckedBox(this);"/>&nbsp;데몬헌터

    </label>

    <label>

        <input type="checkboxclass="neHeros" value="W" onChange="eachCheckedBox(this);"/>&nbsp;워든

    </label>

    <label>

        <input type="checkboxclass="neHeros" value="K" onChange="eachCheckedBox(this);"/>&nbsp;키퍼 오브 더 그루브

    </label>

    <label>

        <input type="checkboxclass="neHeros" value="P" onChange="eachCheckedBox(this);"/>&nbsp;프리시스 오브 더 문

    </label>

</body>

</html>




# 출력결과







Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[JavaScript] 실시간 타이머(시계) 만들기[JavaScript] 실시간 타이머(시계) 만들기

Posted at 2019. 12. 5. 19:25 | Posted in JavaScript & jQuery/JavaScript




■ 실시간 타이머(시계) 만들기




# 소스코드

<html>

<head>

<title>:: JavaScript 전광판 효과 ::</title>

<script type="text/javascript">

    document.addEventListener("DOMContentLoaded", function() {


        // 시간을 딜레이 없이 나타내기위한 선 실행

        realTimer();


        // 이후 0.5초에 한번씩 시간을 갱신한다.

        setInterval(realTimer, 500);

    });


    // 시간을 출력

    function realTimer() {

const nowDate = new Date();

const year = nowDate.getFullYear();

const monthnowDate.getMonth() + 1;

const datenowDate.getDate();

const hournowDate.getHours();

const minnowDate.getMinutes();

const secnowDate.getSeconds();

document.getElementById("nowTimes").innerHTML = 

                  year + "-" + addzero(month) + "-" + addzero(date) + "&nbsp;" + hour + ":" + addzero(min) + ":" + addzero(sec);

}


        // 1자리수의 숫자인 경우 앞에 0을 붙여준다.

function addzero(num) {

if(num < 10) { num = "0" + num; }

  return num;

}

</script>

</head>

<body>

    <h1>■ 현재시간 : <span id="nowTimes"></span></h1>

</body>

</html>




# 출력결과







Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기