취업을 준비하면서 개발 기록을 남겨보려고 요즘 벨로그를 쓰고 있다.

글을 출간 할 때 썸네일을 정할 수 있는데, 뭔가 썸네일을 지정하고 싶긴 한데 막상 어떤 사진을 올릴지 고민이 많이 됐다.

그래서 그냥 이런 느낌으로다가 ppt 제목만 딱 띄워놓은 것 처럼 썸네일 이미지를 만들면 편하지 않을까 생각해봤다.

생각해보니 이거 개인 프로젝트로 왠지 딱일 것 같다.

바로 프로젝트 생성

뭘 만들어야 하는가

div 박스가 있다고 치면 input값에 따라 div 박스 내의 텍스트도 바뀌고, 이 div 박스를 이미지로 만들면 될 것 같다.

이런 느낌

박스

• 입력창에 쓰는 글씨에 따라 박스의 글자도 반영됨

입력창

• 그냥 입력하면 될 것 같음

다운로드 버튼

• 박스를 이미지화 시켜서 다운로드 받을 수 있게 함

html2canvas

문제는 html요소를 이미지로 바꿔야 한다는 건데, 방법을 찾아보다가 이런 라이브러리를 알게 되었다.

html2canvas

Screenshots with JavaScript
https://html2canvas.hertzen.com/getting-started

자바스크립트로 스크린 샷을 찍을 수 있단다.

문서도 있다.

한번 써보자

function App() {
 return (
    <div className="App">
      <div style={{ width: '500px', height: '400px', backgroundColor: 'red' }} className="target">
        안녕
      </div>
      <button onClick={handleClick}>테스트</button>
    </div>
  );
}

대충 스타일 먹여서 박스를 만들고 임포트 해준다.

공식 사이트에 예시 사용법이 이건데 엄청 불친절 하다.

코드를 보는데 then을 쓰는걸 보아 프로미스 객체를 반환하는듯?
그래서 일단 어떤 값을 반환하는지 한번 보기로 했다.

import html2canvas from 'html2canvas';

  const handleClick = () => {
    console.log('안녕');
    const target = document.querySelector('.target');

    const data = html2canvas(target);
    console.log(data);
  };

이 html2canvas가 어떤 값을 주는지 보자.

예상대로 프로미스 객체를 주고, canvas라는 결과를 가진다.

const handleClick = async () => {
    console.log('안녕');
    const target = document.querySelector('.target');

    const data = await html2canvas(target);
    console.log(data);
  };

바로 async를 활용해 값을 받아보자.

캔버스라는 태그의 html 요소를 준다.
e.target을 콘솔로 출력할 때 보는 듯한 값이다.

이걸로 이미지를 만들 수 있을지 찾아보자.

고마워요 stack overflow

https://stackoverflow.com/questions/18581379/how-to-save-the-contents-of-a-div-as-a-image
여기서 찾아보니까 이미지 링크를 만드는 방법을 알 수 있었다.

const handleClick = async () => {
    const target = document.querySelector('.target');

    const a = await html2canvas(target);
    const link = a.toDataURL('image/png');
	console.log(link);    
  };

이런식으로 link를 보면,

이렇게 엄청 긴 url 주소가 생성되고,

내 div 박스가 이미지화 된 것을 확인할 수 있다!

다운로드 해보기

const image = document.createElement('img');
    image.src = link;
    document.querySelector('.이미지').appendChild(image);

이렇게 div 박스 안에 이미지 요소를 생성해 넣으니까,

진짜로 이미지를 다운받을 수 있었다.

진행 경과

html2canvas의 사용법을 알게됨
이제 방법을 알았으니까 한번 제대로 프로젝트를 만들어보자.