사용한 라이브러리

• html2canvas
  • canvasElement 반환.
• htmlToImage
  • base 64 img url 반환.

<aside> 💡 결론 :

• 외부 url 링크가 존재하고 ios 대응을 해야 한다면 html2canvas를,
• 웹만 대응하는 등 그 외의 경우엔 htmlToImage를 추천함.

</aside>

👇 결론에 이르기까지의 과정 👇

htmlToImage를 사용한 이유

• html2canvas에 비해 적은 용량과 제로 디펜던시.

  

• CSS가 깨지지 않음.

• toPng, toJpeg 등 직관적인 사용 방법 (개인적으로 option들도 더 사용하기 쉬웠음).

• html2canvas보다 최근에 업데이트 됨.

라이브러리에 사용된 문법 정리

<aside> 💡 dom을 이미지화시킨 핵심 문법에 대해 알아보자.

</aside>

• HTML <canvas> 태그

  • 주로 자바스크립트와 같은 스크립트를 이용하여 그래픽 콘텐츠를 그릴 때 사용함.
  • src, alt 속성이 없다는 점만 제외하면 img 태그처럼 보임. 실제로 canvas에는 width, height 두 속성만 있음. default 값은 300px * 150px임.

  <canvas id="myCanvas" style="border: 2px solid black">
      이 문장은 사용자의 웹 브라우저가 canvas 요소를 지원하지 않을 때 나타납니다!
  </canvas>
  
  <script>
      var canvas = document.getElementById("myCanvas");
      var context = canvas.getContext("2d");
      context.fillStyle = "yellow";
      context.fillRect(0,0,150,100);
  </script>