html2canvas 로 이미지 저장시에 흰색줄

Posted on Edited on In , Word count in article: 101 Reading time ≈ 1 mins.

배너생성기를 만들면서 html2canvas 라이브러리를 사용하고 있는데

이미지파일로 저장시에 간혹 흰줄이 표시되는 경우가 발생되었다

예제

왼쪽과 위쪽

왼쪽에 흰줄 발생

원인

구글링 하고 issues 열심히 찾아보니
원인이 scroll 때문이라고 한다

1
2
3
html2canvas(banner).then((canvas) => {
  saveAs(canvas.toDataURL(), "banner-maker" + Date.now() + "png");
});

이런식으로 많이 사용하는데
banner 라는 element 를 canvas 로 옮길때 scroll 정보가 해당 이미지 생성에 영향을 주는 것 같다.

해결방법

scroll 정보를 초기화 해준다

1
2
3
4
5
6
{
  scrollX: 0,
  scrollY: -window.scrollY,
  windowWidth: document.documentElement.offsetWidth,
  windowHeight: document.documentElement.offsetHeight,
}

수정한 소스

1
2
3
4
5
6
7
8
html2canvas(banner, {
  scrollX: 0,
  scrollY: -window.scrollY,
  windowWidth: document.documentElement.offsetWidth,
  windowHeight: document.documentElement.offsetHeight,
}).then((canvas) => {
  saveAs(canvas.toDataURL(), "banner-maker" + Date.now() + "png");
});

수정결과

white space 수정 후 저장파일