Html2canvas: 보이는 것만 렌더링

어쩐지 홈페이지에 있는 예문에서는 안보이는 것까지 몸에 다 보여주네요... 어떻게 한거죠?

가능한 중복: https://github.com/niklasvh/html2canvas/issues/117

，특정 요소를 캡처하는 방법을 알고 싶습니다. 누구에게 해결책이 있습니까?

@justein 이것을 시도하십시오

<div id="test-case">Test-me</div>

html2canvas(document.getElementById("test-case")).then(function(canvas) {
    document.body.appendChild(canvas);
});

최신 버전에서 이 동작을 확인할 수 있습니다. 요청한 개체의 올바른 크기를 렌더링하지만 실제로 현재 뷰포트의 화면 밖에 있는 것은 캔버스에 렌더링하지 않습니다. 그래서 만약

<div id="test-case">Test-me</div>

현재 브라우저에 표시되어 있으면 렌더링됩니다. 화면 밖에 있는 경우 캔버스는 비어 있습니다(그러나 올바른 크기임). 부분적으로 표시됨: 부분적으로 렌더링됩니다. 광산은 scrollHeight = 0처럼 작동하지 않으며 코드가 실행될 때 보이는 모든 것을 렌더링합니다. (내 버튼은 하단에 있습니다).

btm님의 댓글처럼 예제 사이트에서는 어떻게 되는지 알고 싶습니다. 오프 스크린 리소스를 얻기 위해 Angular 또는 Bootstrap의 무언가에 의존할 수 있습니까?

@cchubb 나는 Angle과 Bootstrap이 이것과 어떤 관련이 있는지 이해하지 못합니다. John의 문제는 특정 요소를 렌더링하는 문제인 것 같습니다.

뷰포트 외부에 있는 렌더링을 원하면 다음을 사용하십시오.

html2canvas(document.body).then(function (canvas) {});

요소를 "오버플로"로 렌더링하려면 런타임에 "오버플로"를 제거하고 다음과 같이 className 추가를 위해 javascript를 사용하여 프로세스 후에 다시 추가합니다.

.no-scroll {
     overflow: visible !important;
}

#main {
     overflow: auto;
     height: 200px;
}

<div id="main">
test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> 
test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> 
test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> 
</div>

document.getElementById("main").className = "no-scroll";
html2canvas(document.body).then(function (canvas) {
      document.getElementById("main").className = "";
});

또는 다음과 같이 "overflow"를 사용하여 요소 내의 요소를 렌더링하도록 html2canvas를 가리킵니다.

#parent {
     overflow: auto;
     height: 200px;
}

#child {
background-color: #fc0;
height: 600px;
}
<div id="parent">
<div id="main">
test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> 
test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> 
test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> 
</div>
</div>

html2canvas(document.getElementById("main")).then(function (canvas) {});

정말 내 관점에서 불필요한 기능에 대한 많은 제안이 있습니다. 단순히 올바른 DOM 요소를 대상으로 하고 "CSS"를 유리하게 사용합니다.

나는 그것을 알아. 0.5.0-alpha2에서 수정했습니다. 0.5.0-alpha1 버전을 사용하면 클리핑되지만 alpha2 버전은 그렇지 않습니다. 릴리스 페이지가 alpha1에 초점을 맞추고 있었기 때문에 alpha2를 사용할 수 있다는 사실조차 알지 못했습니다.

다음은 alpha2와 함께 작동하는 것을 보여주는 바이올린입니다. https://jsfiddle.net/cchubb/fy7tw7ek/1/ 외부 리소스를 다시 alpha1로 변경하면 하단 링크를 클릭하면 잘립니다. (다운로드 파일을 보려면 .png로 저장해야 합니다. fiddles에서는 출력 창 href를 데이터로 변경할 수 없습니다.)

@btm1 ,

@cchubb 한번 해보 겠습니다.

@cchubb 근본적인 문제는 알파 2에서 수정되었으며 잘 숨겨져 있어 알파 2가 있는 줄도 몰랐습니다.

흠, alpha2에서도 여전히 뷰포트에서 "보이는" 요소의 일부만 렌더링됩니다. 데모는 http://jsfiddle.net/NPC42/ykvL6a17/ 을 참조하십시오. html2canvas는 스크롤된 행만 뷰포트로 내보냅니다(스크롤된 컨테이너 div에 표시되는지 여부에 관계없이).

어떻게 든 html2canvas를 잘못 호출하고 있습니까? 데모용으로 만든 JSFiddle이 아닌 실제 코드에서 테스트할 때 이 제안은 전체 요소를 렌더링하는 데 도움이 됩니다. https://github.com/niklasvh/html2canvas/issues/650 라이브러리 해킹을 피하기 위해.

@NPC 그것은 당신이 아무것도하지 않고보기에없는 것을 렌더링하지 않을 것입니다. 오버플로가 보이도록 변경해야합니다 ---> 정말 빨리 내보내기 ---> 다시 스크롤하여 다시 변경해야 작동하지 않습니다. 이상적인 IMO는 아니지만 작동하도록 하는 옵션이 있어야 한다고 생각하지만 적어도 작동합니다.

@btm1 , 예, 스크롤된 요소 내에 있는 요소를 전달하기 때문에 요소 자체에 오버플로 트리밍이 없으므로 의도가 아니라고 가정합니다.

지금은 내 앱에서 전체 요소를 본문에 다시 연결하여 특정 너비/높이를 적용해야 한다는 것을 알았습니다(절대 위치 요소가 포함되어 있기 때문에). 그 동안 전체 화면 "내보내기 준비 중, html2canvas가 모두 렌더링하는 데 10초 이상이 걸리기 때문에 "기다려 주십시오." 오버레이가 표시됩니다. 렌더링이 완료된 후 너비/높이 설정을 해제하여 원래 위치(스크롤된 컨테이너 내부)에 다시 부착합니다.

번거롭지만 작동합니다.

이상하게도 주어진 요소의 현재 보이는 상단 경계에서만 렌더링됩니다.

https://jsfiddle.net/bianjp/bpc3nq69/1/를 시도
버전 0.5.0.beta4 사용.

해결책은 html2canvas를 호출하기 전에 $('html, body').scrollTop(0) (또는 렌더링할 요소의 상단을 보이게 하는 다른 방법)를 호출하는 것입니다.

수정 제안에 대해 @bianjp 에게 감사드립니다.

이상하게도 주어진 요소의 현재 보이는 상단 경계에서만 렌더링됩니다.

그것이 정상적인 행동입니까 ... 그것은 나에게 매우 이상하게 보입니다!

+1

이 SO 답변이 저에게

html2canvas를 호출하기 전에 렌더링하려는 요소를 뷰포트로 스크롤합니다.

const el = document.querySelector('#test')
el.scrollIntoView()
setTimeout(function () {
  html2canvas(el, {
    onrendered: function (canvas) {
      document.body.appendChild(canvas)
    },
    useCORS: true
  })
}, 10)

그것은 나를 위해 작동합니다.
사용 버전은 0.5.0-beta4입니다.

이것은 여전히 v1.0.0 의 문제입니까? 그렇다면 jsfiddle에 대한 예를

이 호는 원저자의 추가 정보 요청에 대한 응답이 없었기 때문에 자동으로 종료되었습니다. 현재 문제에 있는 정보만으로는 조치를 취하기에 충분한 정보가 없습니다. 더 조사할 수 있도록 필요한 답변이 있거나 찾으면 연락해 주십시오.

안녕하세요, @niklashvh

또한 DOM에만 표시되는 스냅샷을 찍는 문제에 직면했습니다. 버전 0.5.0-beta4가 있습니다.
따라서 @ziyoung 솔루션에 동의합니다. 나는 그가 제안한 대로 똑같이 했다.

           `$('html,body').scrollTop(0);

     html2canvas( $("#rectangular_div"), {
         useCORS: true,
         dpi: 200,

          onrendered:function(canvas) {

              var str = canvas.toDataURL("image/png");
              var contentType = 'image/png';
              console.log(str);
              b64Data =str;
              imgFrameSave();
          }
        })`

그래서 top 0 의 div 위치를 body 로 설정하고 html2canvas 를 호출합니다. 따라서 내 경험에 따르면 이미지 pix-elation 문제를 방지하고 DOM에서 전체 이미지를 캡처할 수 있도록 @eKoopmans의 버전 0.5.0-beta4를 사용하는 것이 좋습니다.

데스크톱에서는 작동하지만 모바일에서는 작동하지 않습니다.

내가 한 것은 htmltocanvas()를 호출하기 전에 window.scrolTo(0,0) 입니다. 화면 상단에 있으면 div가 완료로 인쇄됩니다.