[React] canvas 화면 캡쳐 후 이미지 저장(자동 다운로드)

ifcViewer를 사용하여 bim 파일 뷰어를 구현하였다. 

 

1. canvas 요소 가져오기 

const canvas = viewer.context.getRenderer().domElement;

 

2. canvas 내용 이미지(jpeg)로 변환 

const image = canvas.toDataURL("image/jpeg", 0.9);
if (!image) {
  alert("이미지를 캡처할 수 없습니다.");
  return;
}

 

3. Base64 데이터 URL을 가져와 Blobl 데이터로 변환

- Blob 데이터를 이용해 파일 객체를 생성

- "bimScreenshot.jpg" 이름으로 이미지 파일 생성

const blob = await (await fetch(image)).blob();
const jpegFile = new File([blob], "bimScreenshot.jpg", { type: "image/jpeg" });

 

4. 이미지 다운로드 

const link = document.createElement('a');
link.href = image;
link.download = "bimScreenshot.jpg";
link.click();

 

5. 내가 적용한 전체 코드 

- viewer는 ifc 뷰어

- dispatch에 해당 이미지를 임시 저장

  try {
    const canvas = viewer.context.getRenderer().domElement;

    viewer.context.getRenderer().render(
      viewer.context.getScene(), 
      viewer.context.getCamera()
    );

    const image = canvas.toDataURL("image/jpeg", 0.9);
    if (!image) {
      alert("이미지를 캡처할 수 없습니다.");
      return;
    }
    const blob = await (await fetch(image)).blob();
    const jpegFile = new File([blob], "bimScreenshot.jpg", { type: "image/jpeg" });

    // 이미지 다운로드 (디버깅용)
    const link = document.createElement('a');
    link.href = image;
    link.download = "bimScreenshot.jpg";
    link.click();

    dispatch(setScreenshotImage(jpegFile));
  } catch (error) {
    console.error("스크린샷 캡처 중 오류:", error);
  }