23_10_10 JS공부정리

https://nomadcoders.co/javascript-for-beginners-2/lectures/3749

All Courses – 노마드 코더 Nomad Coders

[노마드코더] 3.0강~

 

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

-accept속성을 통해 이미지파일들만 받을 수 있음.

function onFileChange(event){

    const file = event.target.files[0];

    const url = URL.createObjectURL(file);

}

-event.target.file[0]을 통해 업로드된 파일의 정보를 알 수 있음.

console.dir(event.target)

 

-업로드된 파일정보를 바탕으로 URL.createObjectURL() 통해 받은 파일에 대해 url을 생성할 수 있음.

console.log(url)

-이를 주소창에 복사하면 해당 파일을 얻을 수 있음.

 

-이미지를 캔버스에 넣는 코드

function onFileChange(event){

    const file = event.target.files[0];

    const url = URL.createObjectURL(file);

    const image = new Image(); //새 이미지 생성, html의 img태그를 만드는것과 같음

    image.src = url; //src에 url을 넣어서 이미지를 만듬. 

    image.onload = function () { 

        ctx.drawImage(image, 0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); // .drawInage(url,x좌표,y좌표,너비,높이)

    } //

}

fileInput.addEventListener("change",onFileChange);

 

-더블클릭하는 이벤트는 dblclick이다.

canvas.addEventListener("dblclick", onDoubleClick);

 

-선 모양을 둥글게 하는 코드 : .lineCap = "butt" or "round" or "square"

ctx.lineCap = "round";

-캔버스에 텍스트를 넣는 코드

function onDoubleClick(event) {

    const text = textInput.value; //input에 있는 value값을 가져옴

    if (text !== "") { //비어있으면 안가져옴

        ctx.save(); //선 설정을 미리 저장해놓음

        ctx.lineWidth = 1; 

        ctx.font = "48px serif" // ctx.font(사이즈, 폰트패밀리)

        ctx.fillText(text, event.offsetX, event.offsetY); // ctx.fillText(텍스트,x좌표, y좌표)

        ctx.restore(); //이전 선 설정을 불러옴

    }

}

canvas.addEventListener("dblclick", onDoubleClick);

-캔버스를 저장하는 코드

function onSaveClick(event){

    const url = canvas.toDataURL(); //캔버스에 그려진 그림을 url로 변환해주는 코드

    const a = document.createElement('a'); //가짜 a태그를 만듬

    a.href = url; // a태그에 href를 할당

    a.download = "myDrawing.png"

//a태그의 download속성을 이용해서 a태그를 누르면 다운로드되게 설정. 다운로드할 이미지 이름도 설정 가능.

    a.click(); //a태그를 클릭하는 함수. 클릭해서 다운로드되게 만듬.

}

 

saveBtn.addEventListener("click", onSaveClick);