[JS] 자바스크립트 <canvas> 캔버스 태그에 이미지 삽입하기

thumbnail-maker.web.app

 

자바스크립트 캔버스 이미지

 

자바스크립트를 사용해 <canvas> 태그에 선택한 이미지를 넣는 방법입니다. HTML에 이미지를 선택할 수 있는 file 타입의 <input> 태그와 <canvas>태그를 넣을 <div> 태그만 작성해두겠습니다.

 

 

HTML

---

<input type="file" accept="image/*" id="targetImg"/>
<div class="res"></div>

 

JS

---

const input = document.querySelector('#targetImg');
const res = document.querySelector(".res");

input.addEventListener('change', (e)=> { 

    const file = e.target.files[0];
    const canvas = document.createElement('canvas'); //캔버스 생성
    const ctx = canvas.getContext('2d'); //캔버스 그리기
    const reader = new FileReader();
    const img = new Image(); 

    reader.readAsDataURL(file);
    reader.onload = (e) => {
        img.src = e.target.result;
        img.onload = () => {
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0);
        }

    }


    res.appendChild(canvas);
    
});

 

결과

---