노마드 코더 - 바닐라 JS로 그림 앱 만들기- 이미지 파일버튼 추가

파일 선택 버튼이 추가 되었음.

​

//html

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

accept ="image/*" 파일은 이미지파일로 이미지 파일형식은 모든 파일

<div class="wrap">        
    <canvas></canvas>
    <div class="color_box">
        <input type="range" id="line_width" min="1" max="10" value="5" step="0.5">
        <input type="color" id="color">
        <div class="color_pick">
            <div class="color_option" style="background-color:#eb4d4b;" data-color="#eb4d4b"></div>
            <div class="color_option" style="background-color:#ff7979;" data-color="#ff7979"></div>
            <div class="color_option" style="background-color:#f0932b;" data-color="#f0932b"></div>
            <div class="color_option" style="background-color:#95afc0;" data-color="#95afc0"></div>
            <div class="color_option" style="background-color:#f9ca24;" data-color="#f9ca24"></div>
            <div class="color_option" style="background-color:#badc58;" data-color="#badc58"></div>
            <div class="color_option" style="background-color:#ffbe76;" data-color="#ffbe76"></div>
            <div class="color_option" style="background-color:#7ed6df;" data-color="#7ed6df"></div>
            <div class="color_option" style="background-color:#686de0;" data-color="#686de0"></div>
        </div>
        <button id="mode_btn">Fill</button>
        <button id="destroy_btn">Destroy</button>
        <button id="eraser_btn">Erase</button>
        <input type="file" accept="image/*" id="file"/>
    </div>
</div>

//js

const fileInput = document.getElementById("file");
//file
function onFileChange(e) {
    const file = e.target.files[0];
    const url = URL.createObjectURL(file); //url 가져오기
    const image = new Image();
    image.src = url;//<img src=""/> html 코드와 동일
    image.onload = function() {
        ctx.drawImage(image, 0, 0, canvasWidth, canvasHeight) //(이미지, x좌표, y좌표, 넓이, 높이)
        fileInput.value = null; //file input 비우기
    }
}