이전에 html2canvas 를 이용해서 jsp 환경에서 페이지를 이미지로 다운받는 것을 포스팅하였다.

 

http://cofs.tistory.com/293

 

 

필자는 테이블을 이미지로 바꿔 다운받아야 했다.

 

그런데 이상하게 ie Egde 에서는 잘되는데 ie9, ie10, ie11 에서는 각기 다르게 오류 증상이 나타났다.

 

어떤 버전은 border가 안나오고 어떤녀석은 배경이 안나오거나 스타일이 일부 누락되었다.

 

역시 소문대로 css 적용에 있어 미흡한 부분이 있었다.

 

그래서 찾다보니 아주 심플하게 해결하는 방법이 있었다.

 

 

html2canvas 0.5.0-alpha1 버전에서만 테스트를 진행하였다.

 

 

 

html2canvas.js 파일의 다음 부분을 바꿔주면 된다.

 

2384 라인쯤 가면 나온다.

 

1
2
3
4
5
        return {
            width: container.cssInt('border' + side + 'Width'),
            color: colorTransform ? color[colorTransform[0]](colorTransform[1]) : color,
            args: null
        };
cs

2# : cssInt 를 cssFloat 로만 바꿔주면 된다.

 

1
2
3
4
5
        return {
            width: container.cssFloat('border' + side + 'Width'),
            color: colorTransform ? color[colorTransform[0]](colorTransform[1]) : color,
            args: null
        };
cs

 

ie9, ie10, ie11 ieEdge, Chrome 에서 모두 테스트 했고 더이상의 이상증상은 없었다.

 

 

 

 

by 개발자 CofS 2017.03.13 16:08
  • 재연 2017.07.31 15:09 신고 ADDR EDIT/DEL REPLY

    안녕하세요 html2canvas검색중에 방문하게되었습니다.
    css에서 다중그림자 text-shadow를 ,로 여러개 겹쳐서 쓰는 경우 html2canvas에서 읽히지 않던데
    방법이 있을까요??

    • Favicon of https://cofs.tistory.com BlogIcon 개발자 CofS 2017.08.01 08:52 신고 EDIT/DEL

      글쎄요 ㅠㅠ 이부분은 상황을 재현해놓고 테스트를 해봐야 알거같아요 ㅎㅎ
      상황이 없이 plugin 분석해서 해결하는건 조금 무리가 있습니다 ㅠ

  • 개발자 2019.01.16 16:05 신고 ADDR EDIT/DEL REPLY

    하... 정말감사합니다...
    열심히 검색해도 답을 못찾고있었는데
    이제야 찾았네요ㅠㅠ