Html2canvas: toDataURL() 매우 느림

에 만든 2017년 07월 05일 · 7코멘트 · 출처: niklasvh/html2canvas

차트와 표가 있는 보고서가 있습니다.
jsPDF와 함께 html2canvas 를 사용하여 이 보고서를 PDF 파일로 내보내고 있습니다.

그러나 이 과정은 11000ms 이상으로 오랜 시간이 걸립니다.

내가 사용한 코드 아래를 참조하십시오.

html2canvas($('#first-page'), {
    onrendered: function(canvas) {
        firstPage = canvas.toDataURL('image/jpeg', 0.5);
    },
    background: '#ffffff'
});

제가 뭔가 잘못하고 있는 건가요 아니면 정말로 문제가 되는 건가요?
어떻게 하면 성능을 향상시킬 수 있습니까?

편집: 문제가 toDataURL() 메서드가 아니라 콘텐츠를 캔버스에 _onto_ 렌더링하는 프로세스라는 것을 발견했지만 문제는 계속됩니다.

출처

michelgefuni

👍3

가장 유용한 댓글

2019년에는 html2canvas로 5-6개의 html 콘텐츠를 pdf로 추출할 때 여전히 느립니다.

abhinavkumar985 에 2019년 03월 19일

👍19 👀2

모든 7 댓글

저에게도 느립니다.
다른 대안이 있습니까?

ashitvora 에 2017년 07월 07일

불행히도 다른 솔루션을 찾지 못해 이 지연과 함께 사용해야 했습니다. 내가 찾은 해결책은 CSS 로더를 사용하는 것이 었습니다.

최소한 이 시간을 최적화할 수 있을 때까지는

michelgefuni 에 2017년 07월 07일

다음 코드를 시도해 보세요.

html2canvas([$('#first-page')], {
    onrendered: function(canvas) {
        firstPage = canvas.toDataURL('image/jpeg', 0.5);
    },
    background: '#ffffff'
});

내 프로젝트에서 이 변경이 도움이 됩니다)