[Javascript][React][라이브러리 소개] html을 이미지로 저장하는 방법

 

 

# html-to-image를 활용한 html element를 이미지로 저장하는 방법

- 웹 앱을 개발하다보면, 가끔 웹 페이지 또는 컴포넌트를 이미지로 저장하는 기능이 필요한 경우가 있습니다. 이럴 때 스크린 샷 기능을 활용 할 수도 있지만, 윈도우 외의 영역을 제외 시킨다던지, 특정 컴포넌트를 숨기고 싶은 경우에는 구현이 쉽지 않습니다. 이런 경우 오늘 소개할 라이브러리가 도움이 될 수 있습니다. 지난 포스팅 중에 html2canvas라는 라이브러리를 소개해 드린 적이 있었는데, 오늘 소개할 라이브러리가 더 간편하고 지원하는 이미지 포맷도 다양하니, 꼭 사용해보셨으면 좋겠네요

 

# 깃헙 페이지

GitHub - bubkoo/html-to-image: ✂️ Generates an image from a DOM node using HTML5 canvas and SVG.

 

# 설치 및 사용법

- yarn 또는 npm을 이용해서 라이브러리를 설치합니다

yarn add html-to-image

- 기본 적인 사용법은 아래와 같습니다. html element를 dataUrl원하는 이미지 포맷의 dataUrl로 변환해 줍니다.

/* ES6 */
import * as htmlToImage from 'html-to-image';
import { toPng, toJpeg, toBlob, toPixelData, toSvg } from 'html-to-image';

/* ES5 */
var htmlToImage = require('html-to-image');

var node = document.getElementById('my-node');

htmlToImage.toPng(node)
  .then(function (dataUrl) {
    var img = new Image();
    img.src = dataUrl;
    document.body.appendChild(img);
  })
  .catch(function (error) {
    console.error('oops, something went wrong!', error);
  });

- React에서의 예제도 있습니다. 예제에서는 link를 이용해서 파일로 저장하도록 되어 있네요

import React, { useCallback, useRef } from 'react';
import { toPng } from 'html-to-image';

const App: React.FC = () => {
  const ref = useRef<HTMLDivElement>(null)

  const onButtonClick = useCallback(() => {
    if (ref.current === null) {
      return
    }

    toPng(ref.current, { cacheBust: true, })
      .then((dataUrl) => {
        const link = document.createElement('a')
        link.download = 'my-image-name.png'
        link.href = dataUrl
        link.click()
      })
      .catch((err) => {
        console.log(err)
      })
  }, [ref])

  return (
    <>
      <div ref={ref}>
      {/* DOM nodes you want to convert to PNG */}
      </div>
      <button onClick={onButtonClick}>Click me</button>
    </>
  )
}

- 본 포스팅에서는 PNG로 변환하는 경우만 첨부하였지만, 아래와 같이 여러 포맷으로 변환이 가능하니 참고하시길 바랍니다

• toPng
• toSvg
• toJpeg
• toBlob
• toCanvas
• toPixelData

 

---