로컬 이미지 브라우저에 바로 표시 DataURI

Html

 

<h3>로컬에 있는 이미지를 바로 브라우저에 표시</h3>

<img id="preview" src="" width="700" alt="로컬에 있는 이미지가 보여지는 영역">

<a id="download" download="thumbnail.jpg" target="_blank">

    <img id="thumbnail" src="" width="100" alt="썸네일영역 (클릭하면 다운로드 가능)">

</a>

<input type="file" id="getfile" accept="image/*">

 

 

 

 

Css

 

img {

    margin: 1em 0;

    display: block;

    background: rgb(240, 240, 240);

    border: 1px solid rgb(0,0,0);

}

 

Js

 

var file = document.querySelector('#getfile');

 

file.onchange = function () {

    var fileList = file.files ;

   

    // 읽기

    var reader = new FileReader();

    reader.readAsDataURL(fileList [0]);

 

    //로드 한 후

    reader.onload = function  () {

        //로컬 이미지를 보여주기

        document.querySelector('#preview').src = reader.result;

       

        //썸네일 이미지 생성

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

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

        tempImage.onload = function() {

            //리사이즈를 위해 캔버스 객체 생성

            var canvas = document.createElement('canvas');

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

           

            //캔버스 크기 설정

            canvas.width = 100; //가로 100px

            canvas.height = 100; //세로 100px

           

            //이미지를 캔버스에 그리기

            canvasContext.drawImage(this, 0, 0, 100, 100);

            //캔버스에 그린 이미지를 다시 data-uri 형태로 변환

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

           

            //썸네일 이미지 보여주기

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

           

            //썸네일 이미지를 다운로드할 수 있도록 링크 설정

            document.querySelector('#download').href = dataURI;

        };

    };

};