[정리] canvas API로 이미지 다운받기

리액트로 개발하던 도중, 그림을 수정해서 다운받는 기능 구현할 일이 생겼다.

내 경우에는 그림에 글씨를 새겨 결과물을 스토리지에 저장하는 기능이 필요했다.

 

이런 경우 canvas 라이브러리를 이용해 구현한다

이미 소스코드에는 targetImg라는 Img 컴포넌트와, uploadContent라는 String 데이터가 있다.

targetImg위에 uploadContent를 새겨 그림파일로 만들어주면 된다.

 

구현을 위해 세가지 객체가 필요하다

canvas는 그림과 글을 올릴 DOM객체이다. 기존 바닐라 자바스크립트 구현에서는 canvas 컴포넌트를 셀렉트했으나, 이 경우에는 DOM객체를 새로 만들었다

ctx는 canvas의 property를 정의한다. 추후 ctx 객체를 이용하여 그림과 텍스트를 올린다

마지막으로 targetImage는 기존 소스코드에서 얻어낸다

 

canvas는 canvas 자체의 속성을 정의한다.

예컨데 전체 layout의 크기 등이다.

ctx의 메소드 drawImage를 이용해 사진을 선택하고, fillText를 통해 텍스트를 선택한다.

각 variable에 따라 크기가 결정된다

 

다운받을 url을 생성한다.

 

이때 aTag라는 DOM요소를 만들어 이벤트를 건다. 

사실 aTag자체가 button으로 구현되어 화면에 렌더링되어야 하지만, 

내 경우에는 downloadImage라는 함수 자체를 Material UI 버튼에 걸었다.