[React] 사진, 캡처 이미지를 사용자가 다운로드 받기

하나의 이미지만 다운로드 받기

// download: (클릭하면) 다운 받아지게 되는 이미지 명 
// href: 이미지 경로

<a download="karina.jpg" href="karina.jpeg" title="ImageName">
  <img alt="ImageName" src="karina.jpeg" />
</a>

특정 버튼을 클릭하여 다운로드 받고 싶은 경우에는 useRef 훅을 이용하여 a 태그에 ref를 걸고

버튼을 클릭했을 시에 aRef.current.click() 이런식으로 구현합니다.

 

캡처 이미지(브라우저의 이미지)를 canvas를 이용해서 다운로드 받기 (html2canvas 라이브러리)

import html2canvas from 'html2canvas';

import Karina from './karina.png';

const Main = () => {
  const onCapture = () => {
  	// html2canvas에서 html에서 캡처를 할 tag를 매개변수로 넣어주면 canvas를 담아 Promise 객체를 반환
    // 캔버스를 이미지 형태로 리턴하여 id가 imageWrapper인 tag를 감싸게 된다.
    html2canvas(document.getElementById('imageWrapper') as HTMLElement).then(
      (canvas) => {
        onSaveAs(canvas.toDataURL('image/png'), 'karina.png');
      }
    );
  };
  // a 태그를 돔에 삽입하고 매개변수인 uri에 canvas를 집어넣어 canvas 자체를 다운로드(캡처)받는다.
  const onSaveAs = (uri: string, filename: string) => {
    const link = document.createElement('a');
    document.body.appendChild(link);
    link.href = uri;
    link.download = filename;
    link.click();
    document.body.removeChild(link);
  };


  return(
	<>
          <div id="imageWrapper">
            <img src={Karina} id="img_prev" width="640" height="640" alt="karina" />
            <h3>Something Inspirational</h3>
          </div>
          <button onClick={onCapture}>이미지 다운로드</button>
	</>
  )
}

export default Main;

이미지 다운로드 버튼을 클릭하면 imageWrapper를 id로 가지고 있는 div 태그 전체를 캡처하여 다운로드 받을 수 있습니다.