[React] dom-to-image로 DOM 이미지 다운받기

 

 

 

 

 

 

1️⃣ dom-to-image를 설치한 후,

npm install dom-to-image

 

 

 

2️⃣ useRef()로 해당 DOM을 가져온다.

const imageRef = useRef(null);

 

 

 

3️⃣ 다운로드를 원하는 DOM 부분에 ref를 달아준다.

  <div ref={imageRef}>
    <ImageEdit />
  </div>

 

 

 

4️⃣ button에 onClick 이벤트를 설정한다.

const handleDownload = () => {
  domtoimage.toBlob(DOM).then((blob) => {
    const url = URL.createObjectURL(blob);
    const link = document.createElement("a");
    link.href = url;
    link.download = `파일명.png`;
    link.click();
    URL.revokeObjectURL(url);
  });
};

 

 

 

5️⃣ 버튼을 클릭하면, 캡쳐된 것처럼 다운로드가 잘 된다.