자바스크립트 div 엘리먼트를 스크린샷해서 이미지 파일로 만들기

이미지 파일의 속성에 따라서 안 되는 경우도 있으니 구글링해서 해결해야 한다.

 

<div id="captureDiv">

  <img src="url" crossorigin="anonymous">

</div>

 

로컬 드라이브에 있는 이미지 파일은 crossorigin="anonymous"을 쓰면 안 되는 것 같다.

 

 

 

// 스크린샷을 할 div 엘리먼트를 가져온다. width와 height가 설정돼 있어야 한다.

const captureDiv = document.getElementById('captureDiv');

 

// 버튼 등을 이용해서 적당한 때 함수를 호출한다.

makeDivToImageFile(captureDiv);

 

function saveAs(url, fileName) {

  const link = document.createElement('a');

  link.href = url;

  link.download = fileName;

  document.body.appendChild(link);

  link.click();

  document.body.removeChild(link);

}

 

function makeDivToImageFile(captureDiv) {

  html2canvas(captureDiv, {

    allowTaint: true,

    useCORS: true,

    /* 아래 3 속성이 canvas의 크기를 정해준다. */

    width: captureDiv.offsetWidth,

    height: captureDiv.offsetHeight,

    scale: 1

  }).then(function (canvas) {

    const imageURL = canvas.toDataURL('image/jpeg');

    saveAs(imageURL, 'new file.jpg');

  }).catch(function (err) {

    console.log(err);

  });

}

 

깃허브 :  github.com/ipf-gwkim/capture-div.git

참고 : https://medium.com/fredwong-it/html2canvas-does-not-render-images-located-in-the-element-dedfbae3fac5

참고 : https://stackoverflow.com/questions/22710627/tainted-canvases-may-not-be-exported

라이브러리 : https://html2canvas.hertzen.com