리액트에서 생성된 이미지를 카카오톡으로 공유하려고 합니다. (에러 메시지: POST https://kapi.kakao.com/v2/api/talk/message/image/scrap 400)

JavaScript
1

안녕하세요.

저는 한 div를 이미지화해서 카카오톡으로 공유할 수 있게 만들고 싶어요.
그래서 domtoimage라는 함수를 이용해서 div를 이미지로 만드는 것까지 성공했습니다.
이 생성된 이미지를 카카오 공유를 하려고 하는데요, 관련 코드는 아래와 같습니다

var node = document.getElementById(“banpickbox”) as HTMLImageElement;

domtoimage.toPng(node)

.then(function (dataUrl) {

  var img = new Image();

  img.src = dataUrl;

  console.log(dataUrl);

  node.appendChild(img);

  window.Kakao.Share.scrapImage({

    imageUrl: dataUrl,

  });

});

여기서 Share.scrapImage가 POST https://kapi.kakao.com/v2/api/talk/message/image/scrap 400라는 에러를 띄우는데, 이거 어떤 의미인지 알 수가 없어서 도움을 받고 싶습니다.

여기에서 에러를 확인하실 수 있습니다: https://theohcode.com/banpick

감사합니다.
오한비

2

안녕하세요.

Kakao.Share.scrapImage 의 imageUrl 파라미터는 카카오 스크랩서버가 접근할 수 있는 실제 이미지 경로(URL)를 사용하셔야만 합니다.

domtoimage의 toPng 는 클라이언트측 브라우저에서만 접근 및 표현할수 있는 BASE64 인코딩된 데이터입니다.

3

domtoimage의 파일포맷이 Kakao.Share.scrapImage와 맞지 않다는거군요.
그렇다면 혹시 div를 이미지로 만들어서 카카오톡으로 쉐어할 수 있는 방법이 있을까요?

4

scrapImage 기능은 카카오 측에서 접근 가능한 URL로 제공되어야 합니다.
domtoimage 의 경우 클라이언트 브라우저 내에서 동작하기에 서버가 아닌것이구요
이를 해결하기 위해선 domtoimage에서 생성된 이미지 데이터를 서비스측 서버에 파일로 저장해 두고 해당 파일에 접근할수 있는 URL로 제공해야 합니다.