[그림 앱 만들기] 이미지, 텍스트 첨부, 저장하기

이미지 첨부

기능

파일 선택을 클릭하여 원하는 이미지를 캔버스 사이즈에 맞추어 업로드할 수 있다.

 

기술

- 다음 코드를 통해 이미지 파일을 입력받을 수 있도록 했다. (multiple 속성을 추가하여 여러 개 입력받을 수도 있다.)

<input class="img-input" type="file" accept="image/*" />

- 해당 파일의 정보를 불러와서 url(해당 브라우저에서만 유효하다)을 생성한다.

- img tag를 생성하여 src를 url로 설정한다.

// 이미지 파일을 선택하는 event가 발생했을 때
const file = event.target.files[0];
const url = URL.createObjectURL(file);
const image = new Image();
image.src = url;

- 이미지 파일을 캔버스에 나타내고, input의 value는 초기화한다.

---

텍스트 첨부

기능

입력칸에 원하는 텍스트를 입력하고 캔버스에 더블클릭하면 해당 텍스트가 설정한 색으로 나타난다.

 

기술

- 캔버스가 더블클릭을 감지하면 그 위치에 입력칸의 value를 text로 나타낸다.

- 텍스트의 lineWidth는 1로 설정했기 때문에, 이전 설정 값을 저장하고 다시 불러오기 위해 아래 코드를 활용한다.

// const ctx = canvas.getContext("2d");
ctx.save();
ctx.restore();

- Fill 모드일 때는 더블 클릭을 해도 채우기가 되기 때문에 디버깅이 필요하다.

---

저장하기

기능

Download 버튼을 클릭하면 캔버스가 myDrawing.png로 내 컴퓨터에 저장된다.

 

기술

- 캔버스를 url로 변경한다.

- a(html tag)를 생성하여 href는 캔버스 링크, download는 myDrawing.png로 설정한다.

const url = canvas.toDataURL();
const a = document.createElement("a");
a.href = url;
a.download = "myDrawing.png";
a.click();

---

https://github.com/soaringwave/html-JS-css/commit/18ed7a2739e8318210e85bebd9adbeafee2cc85f