[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의 가능성에 대해서 좀더 알아봐야 겠다는 생각을 하고 있다.











반응형
저작자표시

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

[JavaScript] Canvas로 이미지 서버에 전송하기 - Sample  (0) 2020.03.06
[JavaScript] Canvas를 통한 이미지 회전  (6) 2020.03.04
[JavaScript] getElementByTagName( ) 메소드  (0) 2020.02.28
[JavaScript] INPUT TYPE FILE 썸네일 생성  (0) 2020.01.16
[JavaScript] 파일업로드시 용량 검사하기  (0) 2019.12.26
//

티스토리툴바