javascript에서 html dom 요소를 png로 내보내기

소개

import domtoimage from "dom-to-image";

const scale = 5;

//...

function exportAsPNG() {
    domtoimage
      .toBlob(element, {
        //Changing the resolution by a factor (scale)
        //Else this setup might cause blurry images
        width: element.clientWidth * scale,
        height: element.clientHeight * scale,
        style: {
          transform: `scale(${scale})`,
          transformOrigin: "top left",
        },
      })
      .then(blob => {
        saveAs(blob, "image.png");
      });
  }

  function saveAs(blob, fileName) {
    let url = window.URL.createObjectURL(blob);
    let a = document.createElement("a");
    a.href = url;
    a.download = fileName;
    document.body.appendChild(a);
    a.click();
    window.URL.revokeObjectURL(url);
    a.remove();
  }

연습

메모

연결