[Blog Thumbnail Maker] 썸네일을 저장해보자

 

 

[Blog Thumbnail Maker] 썸네일 메이커 기능 개선 프로젝트

▲ 기능 개선을 하고싶은 항목들에 대한 포스팅

 

기능 개선을 하겠다는 포스팅을 올린지도 거의 한 달이 다 되어가는데, 이제서야 첫 기능 개선에 대한 포스팅을 작성하게 되었다. 학교 중간고사 기간도 있었고, 코로나 19 확진과 이런저런 잔병치레들로 도저히 키보드를 두드리며 생각을 해낼 겨를이 없었다. 알고리즘 문제만 간신히 이어오고 있던 와중에 심심해서 한가지를 성공해버려서 포스팅을 작성하게 되었다.

 

처음으로 추가한 기능은 파일 저장 버튼을 구현하는 기능이었다.

사실 이 기능을 구현한지는 일주일 내지 이주일 정도는 지났는데, 포스팅이 늦어진 것 뿐이다....

일단 결과물을 먼저 보자.

 

썸네일 텍스트를 입력하는 텍스트 필드에 입력된 Test를 Canvas 위에 올려줬고, 썸네일 저장 버튼을 누르면 입력한 썸네일 텍스트를 이름으로 한 png 파일이 다운로드 되는 것을 볼 수가 있다.

 

이제 이 기능을 어떻게 구현했는지 자세하게 정리해보려고 한다.

---

 

📚 이 기능을 구현하는 데에 사용한 라이브러리

dom-to-image

임의의 DOM 노드를 벡터 혹은 래스터 이미지로 변환해주는 라이브러리입니다.

 

FileSaver

파일 내보내기를 할 수 있는 라이브러리입니다.

 

라이브러리에 대한 자세한 이야기는 따로 포스팅을 하고, 이 포스팅은 기능 구현에 대한 포스팅이므로 이 정도로만 하고 넘어가겠습니다.

✍️ 이 기능을 구현하며 참고한 레퍼런스

[자바스크립트] 웹 문서 화면 이미지 다운로드하기 | dom-to-image | filesaver

▲ 탐구소년님의 포스팅

GitHub - tsayen/dom-to-image: Generates an image from a DOM node using HTML5 canvas

▲ dom-to-image 레포지터리

[React.js] 컴포넌트 저장 기능 구현하기(dom-to-image, FileSaver)

▲ Vintz님의 포스팅

 

---

⌨️ 기능 구현 코드

다운로드 기능

  const onDownloadBtn = () =>{
    const CurCanvas = canvas.current;

    domtoimage //제작된 썸네일 다운로드
  
      .toBlob(CurCanvas)
      .then((blob,) => {
        saveAs(blob, thumbName);
      });
  }

썸네일을 다운로드할 때, 썸네일의 이름을 썸네일 텍스트에 입력된 값으로 지정해주고 싶었는데, 내가 참고한 분들의 블로그에서는 해당 기능까지는 구현이 되지 않았다. 따라서 useEffect에서 어찌저찌 이리저리 하다보니 썸네일 텍스트 값을 가져올 수 있었고, thumbName으로 파일 이름을 사용자가 입력한 썸네일 텍스트로 지정할 수 있게 되었다.

 

썸네일 텍스트를 썸네일 이름으로

 const [thumbText, setThumbText] = useState('');
 var thumbName ='';


useEffect(() => {
      const ctx = canvas.current.getContext("2d")
      //Start of canvas useEffect
      ctx.fillStyle= color
      ctx.fillRect(0, 0, 960, 540)

      ctx.font = "60px Noto Sans CJK KR"
      ctx.fillStyle = "white"
      ctx.fillText(thumbText, (800/2), (500/2))
      ctx.textBaseline = "middle"
      ctx.textAlign = "center"
      //End of canvas useEffect

      thumbName = thumbText; //For Making Thumbnail file name.
  }, [canvas, thumbText, color])

위에서 말한 썸네일 텍스트를 제목으로 지정해주기 위한 어찌저찌 이리저리의 부분이다.

썸네일 이미지가 될 캔버스가 업데이트 될 때 상태를 관리해주기 위한 useEffect이며, 썸네일 텍스트가 입력되어서 캔버스 위에 작성되는 것이기 때문에 useState를 통해 thumbText의 초기값을 지정해주고, setThumbText를 통해서 입력된 텍스트를 관리해주었다.

 

useEffect에서 thumbName에 thumbText를 담음으로써 파일명으로 썸네일 텍스트를 지정할 수 있게 되었다.

사실 이 코드가 아직은 불만이다. thumbText의 값을 그대로 쓸 수 있을 줄 알았는데 thumbName이라는 별도의 변수로 가져온게 뭔가 마음에 들지 않는다. 아직 지식이 부족해 일단 구현에 성공했다는 것만으로도 만족스럽긴 하다.

 

저장 버튼

<div id="divThumbnailSave">
        <button className='thumbDown' onClick={onDownloadBtn}>
        썸네일 저장
        </button>
      </div> {/* End of divThumbnailSave */}

썸네일 저장 버튼을 구현한 코드이다. onClikck 이벤트를 onDownloadBtn을 통해 처리하는 것을 알 수 있다.

그것 외에는 더 이상 설명할 것이 없다. 너무나도 간단한 JSX 코드이기 때문에...

 

---

이렇게 처음으로 기능 구현을 한 과정에 대해서 포스팅을 해보았다.

정말 솔직하게 ⌘ + c & ⌘ + v에 수정을 조금 가했다는 것 외에는 크게 한 것이 없어 보인다.

하지만 계속 원하는 이름으로 저장이 되지 않다가, 내가 원하는 파일명으로 저장이 되었을 때의 쾌감은 그 어떤 것도 부럽지 않을 만큼 컸다.

이런 쾌감 때문에 개발이 재밌어지는게 아닐까 싶다.

 

다음에는 무슨 기능을 구현해볼지 아직 정하지는 않았지만, 앞으로도 기능 구현 및 개선이 완료되는 족족 정리해서 포스팅을 올릴 수 있도록 해봐야겠다.

 

GitHub - HarenKei/Thumbnail_Maker