[React hook] html 요소를 이미지로 저장하고, 이미지 호스팅하여 카카오톡 api로 공유하기 :: html2canvas, imgur, kakao api

html2canvas + 이미지 호스팅

*예제는 React Hook 환경에서 진행되었습니다.

결과 table을 이미지로 만들어 공유해야하는 요구사항이 있었다. 요구사항을 수행하기 위해서는 다음과 같은 과제를 순차적으로 해내야한다.

1. html table을 이미지로 만들기
2. 만들어진 이미지를 호스팅하기
3. 호스팅된 이미지를 카카오톡 api를 이용하여 공유하기

차례대로 해보자.

 

html table을 이미지로 만들기

DOM요소를 이미지로 만들 때, html2canvas라는 라이브러리가 주로 쓰인다.

import html2canvas from 'html2canvas';

const copyDOM = async () => {
    window.scrollTo(0, 0);

    let url = "";
    await html2canvas(document.getElementById("teamtable")).then(async (canvas) => {
        url = await canvas.toDataURL("image/jpg").split(',')[1];
        setOpen(true);
    });

    await uploadImgur(url);
}

• html2canvas 라이브러리를 패키지매니저로 설치한다.
• copyDOM이라는 DOM을 이미지로 만드는 함수를 만든다.
  • scroll을 (0,0)으로 만들어주는 이유는, 이렇게 하지 않으면 만들어진 이미지의 위쪽에 여백이 생기기 때문이다.
  • html2canvas 함수에 이미지로 변환을 원하는 DOM요소를 매개변수로 넣고 결과로 나온 canvas를 toDataURL 함수로 이미지화하여 url을 추출한다.
  • url은 data uri로 나온다.
    • ex_ data:// ...

 

만들어진 이미지를 호스팅하기

이미지를 서버에 저장하면 좋겠지만, 시간도 없었을 뿐더러 서버 부하가 이미 엄청났기 때문에 호스팅 사이트를 이용하였다.

https://apidocs.imgur.com/

imgur 사이트에서 api를 이용하여 호스팅을 할 수 있게 만들어두었다.

https://imgur.com/

api를 이용하기 전, imgur 사이트에 가입한 후에 setting의 Applications 메뉴에서 ClientID를 발급받아야한다.

참고로 해당 ID와 secret은 이미 폐기되었다.

const uploadImgur = (url) => {
    const apiBase = 'https://api.imgur.com/3/image';
    axios.post(apiBase, {
        image: url,
        type: 'base64'
    }, {
        headers: {
            Authorization: 'Client-ID ' + CLIENT_ID
        }
    })
        .then(res => {
        setShareImg(res.data.data.link);
    })
        .catch(e => {
        console.log(e);
    })
}

https://api.imgur.com/3/image api를 이용하여 post로 아까 저장해두었던 image의 url을 넘김과 동시에 type을 base64로 넘긴다. data uri이기 때문에 type을 반드시 함께 넘겨주어야한다.

 

Header에는 방금 발급받았던 Client-ID를 Authorization 필드에 첨부한다. 반드시 Client-ID 아이디 형태여야한다.

이렇게 api를 호출해보면 다음과 같은 결과를 넘겨받을 수 있다.

https://apidocs.imgur.com/#2078c7e0-c2b8-4bc8-a646-6e544b087d0f 참고

{
  "data": {
    "id": "orunSTu",
    "title": null,
    "description": null,
    "datetime": 1495556889,
    "type": "image/gif",
    "animated": false,
    "width": 1,
    "height": 1,
    "size": 42,
    "views": 0,
    "bandwidth": 0,
    "vote": null,
    "favorite": false,
    "nsfw": null,
    "section": null,
    "account_url": null,
    "account_id": 0,
    "is_ad": false,
    "in_most_viral": false,
    "tags": [],
    "ad_type": 0,
    "ad_url": "",
    "in_gallery": false,
    "deletehash": "x70po4w7BVvSUzZ",
    "name": "",
    "link": "http://i.imgur.com/orunSTu.gif"
  },
  "success": true,
  "status": 200
}

이 중에 link 값을 사용할 수 있도록 받아와서 저장하면 된다.

 

호스팅된 이미지를 카카오톡 api를 이용하여 공유하기

https://developers.kakao.com/console/app

우선 kakao developers 사이트에 가입하여, 애플리케이션에 해당 사이트를 추가한다. 그러면 JavaScript 키를 할당해주는데, 이 키를 사용하자.

 

https://developers.kakao.com/docs/latest/ko/getting-started/sdk-js

설명에 따르면, html에 다음과 같은 script를 삽입하면 kakao api를 사용할 수 있다고 한다.

<script src="https://developers.kakao.com/sdk/js/kakao.js?appkey=ac840cde3dd820d526d4ce50e78ab872&autoload=false"></script>
<script>
    // SDK를 초기화 합니다. 사용할 앱의 JavaScript 키를 설정해 주세요.
    Kakao.init('JAVASCRIPT_KEY');
</script>

아까 할당 받은 자바스크립트 키를 init에 매개변수로 넣어주자.

그리고 메세지 share api를 이용하여 함수를 작성하면 된다. 이 때, React를 사용하므로 sdk로 import한 Kakao 변수를 사용하기 위해 window 객체에 저장된 Kakao 변수를 사용하자.

api는 기본 메세지 보내기 api를 사용하였다.

https://developers.kakao.com/docs/latest/ko/message/js#send-with-kakaolink 참고

const kakaoShare = () => {
    props &&
        window.Kakao.Link.sendDefault({
        objectType: 'feed',
        content: {
            title: "Let's Meet(렛츠 밋)",
            description: "팀 일정 결정 및 공유 사이트",
            imageUrl:    props.shareImg,
            link: {
                webUrl: window.location.href,
            },
        },
        buttons: [
            {
                title: '일정 보러 가기',
                link: {
                    webUrl: window.location.href,
                },
            },
        ]
    });
}

imageUrl에 아까 호스팅한 이미지의 주소를 넣고, link에 서비스할 사이트의 url을 넣은 후 api를 요청하면된다.