(Meme Maker) #이미지 삽입하기

Meme Maker
이미지 삽입하기

---

- 만들고 싶은 기능

 

 

• 먼저 HTML에 Input 태그 추가 (파일 형식, 추가될 수 있는 파일 형식설정)

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

 

• JavaScript 에서 element 불러오고 이벤트리스너 붙여주기

const fileInput = document.getElementById("file")
fileInput.addEventListener("change", onFileChange);

 

• JavaScript 에서 onFileChange 함수 만들기

function onFileChange (event){
	const file = event.target.files[0];
    const url = URL.createObjectURL(file);
    const image = new Image();
    image.src = url;
    image.onload = function (){
    	ctx.drawImage(image, 0, 0, 700, 700);
        fileInput.value = null;
    }
}