The Pursuit of Happyness

반응형

html2canvas 를 이용하면 현재 화면에 보여지는 html 페이지를 canvas 혹은 이미지로 만들수 있는데,

Open UI5 등의 bootstrap 을 이용하면 렌더링 영역이 화면에 보여지는 윈도우 영역으로 한정되기 때문에 현재 브라우져 창의 사이즈를 넘어가는 영역은 제대로 렌더링이 되지 않는 이슈가 있습니다.


위의 이슈를 해결하기 위해서 화면사이즈보다 작은 영역을 캡쳐해서 합치는 방법을 이용한 코드 예제 입니다.


https://github.com/shineum/div2img


사용법은 아래와 같이 캡쳐할 영역의 innerHTML, 캡쳐할 영역 크기, 콜백을 지정하면 됩니다.


div2img(document.bodyfunction(pImgData) {


       var tNewDiv = document.createElement('div'); 


       document.body.appendChild(tNewDiv);

       tNewDiv.innerHTML = "<img src='" + pImgData + "'>";

}, 12002400, 0, 0);


반응형