Html2canvas: html2canvas만을위한 요소 스타일링?

onclone 옵션으로 렌더링 될 문서 (원본의 복제본)의 내용을 수정할 수 있습니다. 예를 들면 다음과 같습니다.

html2canvas(document.body, {onclone: function(document) {
  document.querySelector('.something').style.marginLeft = 0;
}}).then(...)

고마워 Nik! 이 라이브러리에서 작업 해 주셔서 대단히 감사합니다. 문서에 있습니까?

아니요, 안타깝게도 아닙니다. 문서는 현재 많은 측면에서 크게 부족합니다 ...

다운로드 한 이미지가 적절한 스타일을 얻지 못하므로 모든 스타일을 인라인 CSS로 변환하여 올바르게 렌더링하기 위해 computed-style-to-inline-style 을 사용하고 있습니다. 그러나 그것의 문제는 그것이 원래 돔에 영향을 미치고 있다는 것입니다. 따라서 onclone 함수 내에서 대신 복제 된 요소에 대해 수행하고 싶지만 작동하지 않고 이미지 스타일이 적절하지 않습니다. 왜 그런지 아십니까?

나는 똑같은 일을 시도했다. 여기에 내가 그것을 구현하고 모든 스타일이 제대로 다운로드 된 방법이있다.

const computedStyleToInlineStyle = require("computed-style-to-inline-style");

 html2canvas(document.querySelector(".someclass"), {onclone: function(document) {
     computedStyleToInlineStyle(document.querySelector(".someclass"), {
          recursive: true
      });
    }}).then(canvas => {
        const imgData = canvas.toDataURL('image/png');
        ...
    });