자바스크립트 이미지 호출 - jabaseukeulibteu imiji hochul

Question

input 태그에서 선택한 이미지를 화면에 바로 출력하도록 해보자.

목차 Show

실행 화면
여러 이미지 미리보기
코드 예제
js 이미지 가져 오기 src
js 를 통해 html 에서 다른 이미지를 설정하는 방법
js url 에서 이미지 가져 오기
비슷한 페이지
예제가있는 유사한 페이지
다른 언어로
이 페이지는 다른 언어로되어 있습니다
이 카테고리에서 인기
카테고리에 예제가 포함 된 인기있는 페이지

코드

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>썸네일 만들기</title>
  </head>
  <body>
    <input type="file" id="image" accept="image/*" onchange="setThumbnail(event);"/>
    <div id="image_container"></div>

    <script>
      function setThumbnail(event) {
        var reader = new FileReader();

        reader.onload = function(event) {
          var img = document.createElement("img");
          img.setAttribute("src", event.target.result);
          document.querySelector("div#image_container").appendChild(img);
        };

        reader.readAsDataURL(event.target.files[0]);
      }
    </script>
  </body>
</html>

input 태그에서 onchange 속성에 실행될 메소드를 정해줍니다.

메소드 내에서 FileReader 객체를 생성하고 onload 됐을 시 발생할 이벤트를 작성해줍니다.
FileReader 가 로드 됐을 때 img 엘리먼트를 생성하고 src 속성을 설정해줍니다.
그리고 이미지가 들어갈 div에 넣어줍니다.

리더에서 input 태그에서 선택한 파일을 읽어오도록 설정합니다.

실행 화면

여러 이미지 미리보기

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>썸네일 만들기</title>
  </head>
  <body>
    <input type="file" id="image" accept="image/*" onchange="setThumbnail(event);" multiple/>
    <div id="image_container"></div>

    <script>
      function setThumbnail(event) {
        for (var image of event.target.files) {
          var reader = new FileReader();

          reader.onload = function(event) {
            var img = document.createElement("img");
            img.setAttribute("src", event.target.result);
            document.querySelector("div#image_container").appendChild(img);
          };

          console.log(image);
          reader.readAsDataURL(image);
        }
      }
    </script>
  </body>
</html>

input 태그에 multiple 속성을 추가해주었고
setTumbnail 메소드 안에서 반복문을 돌려서 미리보기를 설정합니다.

html 구조

<div class="img_wrap">
    <img src="abc01.jpg" alt="큰이미지" id="big">
    <div class="small_img_wrap">
    	<img src="abc01.jpg" alt="작은이미지1" class="simg">
    	<img src="abc02.jpg" alt="작은이미지2" class="simg">
    	<img src="abc03.jpg" alt="작은이미지3" class="simg">        
    </div>
</div>

javascript

var bigImg = document.querySelector('#big'); //큰 이미지 가져오기
var sImg = document.querySelectorAll('.simg'); //작은 이미지들 노드 리스트로 가져옴

for(var i = 0; i < sImg.length; i++) {
    sImg[i].onclick = showImg;  //노드를 클릭하면 showImg 함수 실행
}

function showImg() {
    var newImg = this.src; //클릭 이벤트가 발생한 대상의 src 속성 값을 가져옴
    bigImg.setAttribute('src', newImg);  //newImg 값을 큰 이미지의 src 속성 값에 할당
    //또는 big.src = newImg; 도 가능
}


//또는 함수 실행하지 않고 하는 방법
for(var i = 0; i < sImg.length; i++) {
    sImg[i].onclick = function(e) {
    	bigImg.src = this.src;
    };
};

코드 예제

js 이미지 가져 오기 src

var youtubeimgsrc = document.getElementById("youtubeimg").src;

js 를 통해 html 에서 다른 이미지를 설정하는 방법

<div id="x"></div>

<script>
var img = document.createElement("img");
 
img.src = "image.png";
var src = document.getElementById("x");
 
src.appendChild(img);
</script>

js url 에서 이미지 가져 오기

var elements = [];
function loaded(){
  console.log("you have loaded an image");
}
CreateFileFrom("your/dir/here/img.png");

function CreateFileFrom(dir){

  		/* defining runtime variables */
	  		var extension                        =   dir.split('.').pop();
	  		var keys                             =   {"png":"IMG","jpg":"IMG","jpeg":"IMG",
	  												  "js":"SCRIPT","json":"SCRIPT",
	  												  "mp3":"AUDIO","wav":"AUDIO"};
	  	    var obj                              =   document.createElement(keys[extension]) || {};
	  	    obj.src                              =   dir;
	  	    
	  	/* onload function called when the resource is loaded */
	  	    obj.onload                           =   (e) => {

	  	    	elements.push(e.path[0]);
	  	    	loaded()
	  		}

  		/* make sure that the data is compitable */
  			if(keys[extension]==null){console.error("not supported media type "+extension);return;}
  	}