[JavaScript][dom-to-image] dom element 요소 이미지 태그로 바꾸기

 

dom element 요소를 <image> 태그로 바꾸는 기능을 찾아보다가 dom-to-image 라이브러리를 발견했다.

How to Render HTML to an Image with JavaScript?

위 글을 참고해서 svg 요소가 포함된 dom element 요소를 이미지로 바꾸었다.

 

적용한 코드는 다음과 같다.

function gridToPng(){
  var node = document.getElementById('grid'); //지정한 요소의 자식 요소들을 이미지 태그로 만들게 됨

  domtoimage.toPng(node).then(function (dataUrl) {
      var img = new Image(); //이미지 태그 생성
      img.id = "domToImage"; //id 할당
      img.src = dataUrl; //만들어진 url src로 할당
      gridToPng_div.appendChild(img); //지정한 요소 자식 요소로 이미지 태그 삽입
      gridToPng_div.classList.replace('gridToPng_div', 'gridToPng_div-visible');
  }).catch(function (error) {
      console.error('error', error);
  });
}

 

 

끝!