[Javascript] Canvas API - 그림판 구현하기2

2023.01.10 - [웹 개발/Javasript] - [Javascript] Canvas API - 그림판 구현하기

[Javascript] Canvas API - 그림판 구현하기

 

기능 5. 텍스트 입력해서 삽입하기

 

 

텍스트 바에 삽입할 텍스트를 적고, canvas 를 더블클릭하면 해당 텍스트가 십입 될 수 있도록 기능한다.

 

 

 

[HTML]

<input type="text" placeholder="Write and then double click" id="text"/>

 

[JS]

• ctx.save() 는 현재 ctx 의 모든 속성을 저장하는 역할을 한다.
• ctx.restore() 는 ctx.save() 에 저장된 ctx 속성을 다시 복구시킨다.
• 텍스트도 ctx 의 속성이 적용되기 때문에 구분해주기 위해 사용한다.
• ctx.strokeText(텍스트, x위치, y위치) 는 ctx 에 텍스트로 채워주는(삽입) 역할을 한다.

const textInput = document.getElementById("text");

function onDoubleClick(event) { // 더블클릭한 위치에 text 넣기
    ctx.save(); // 현재 ctx 상태를 저장
    const text = textInput.value;
    ctx.lineWidth = 1;
    ctx.font = '48px serif'; // 폰트변경 가능
    ctx.strokeText(text, event.offsetX, event.offsetY); // text를 원하는 현재 커서 위치에 넣기
    ctx.restore(); // 저장한 ctx 상태로 복구 
}

canvas.addEventListener("dblclick", onDoubleClick); // 더블클릭시 작동

 

---

기능 6. 이미지 파일 추가하기

 

 

[HTML]

• input type="file" 은 파일 업로드 기능을 지원하게 해준다
• accept 는 파일 중에서 어떤 형식의 파일을 허용할 것인지 알려준다.
• 이미지 형식파일만 허용할 것이므로 image/* 를 사용한다(png, jpg 등 이미지 형식 모두 허용)

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

파일업로드 기능

 

[JS]

•  input 태그를 통해 이미지 파일을 업로드 하면 input 태그의 files 속성에 이미지파일에 대한 정보가 URL 형식으로 저장된다. 이를 const file 을 거쳐 const url 에 저장시켜준다.
•  const image = new Image() 는 document.createElement('img') 와 같은 역할을 한다.\
•  img 가 만들어지고 로드 되면 함수를 실행한다.
•  ctx.drawImage() 는 이미지파일로 canvas 를 채우는 함수이다. 

const fileInput = document.getElementById("file");

function onFileChange(event) {
    const file = event.target.files[0]; // 유저가 업로드한 파일은 브라우저의 메모리에 저장되있음
    const url = URL.createObjectURL(file); // URL 을 통해 호출 (업로드한 브라우저안에서 사용)
    const image = new Image(); // create element <img>
    image.src = url;
    image.onload = function() { //img 태그가 로드되면 바로 실행
        ctx.drawImage(image, 0, 0,CANVAS_WIDTH, CANVAS_HEIGHT);
    };
}

fileInput.addEventListener("change",onFileChange);

 

---

기능 7.  저장기능 추가하기

 

 

지금까지 작성한 이미지를 내 파일로 저장하는 기능을 한다.

 

 

 

[HTML]

<button id="save-btn">Download</button>

다운로드 버튼

[JS]

• canvas.toDataURL() 은 현재 작성된 canvas 에 대한 정보를 URL DATA로 저장하는 함수이다. 실제로 확인해보면 사이즈가 큰 URL 정보가 나타난다.
• a 태그를 통한 가짜링크를 생성해서 다운로드 받을 수 있도록 한다.
• a 태그의 링크는 canvas 정보인 url 이다.
• a 태그로 다운로드 받으면 파일명은 "myDrawing.png" 이다. >> a.download = "저장할 파일명"
• a 태그를 자동적으로 클릭할 수 있도록 해준다. >> a.click()

const saveBtn = document.getElementById("save-btn");

function onSaveClick() {
    const url = canvas.toDataURL(); //이미지를 URL DATA 로 표현하고 변수에 저장. 
    const a = document.createElement("a"); // 가짜링크생성, a태그의 download 옵션 사용
    a.href = url;
    a.download = "myDrawing.png"; // DOWNLOAD 명
    a.click(); // (가짜)링크선택 - 다운로드받기
}

saveBtn.addEventListener("click",onSaveClick);