Html2canvas: "display:none"이 있는 div의 내용을 가져올 수 없습니다.

에 만든 2016년 03월 06일 · 10코멘트 · 출처: niklasvh/html2canvas

안녕하세요 숨겨진 div의 스크린 샷을 찍고 싶습니다.

이것은 내가 시도한 코드입니다
HTML:

<div` id="visible">
hello there!!
</div>
<div id="hidden" style="display:none">
You can't see me :P
</div>

JS:

var elem1=$("#hidden");
if(!elem1.is(":visible"))
{
elem1.show();elem1.fadeIn(1);elem1.fadeOut(1);
}
html2canvas(elem1).then(function(canvas){

$("body").append(canvas);

});

브라우저 오류:
**

잡히지 않은 TypeError: nullhtml2canvas @ html2canvas.js:941(익명 함수) @ HtmlPage의 '길이' 속성을 읽을 수 없습니다. HTML:13

**
내 바이올린:https ://jsfiddle.net/h39tp0Ly/2/

이것 좀 도와주세요

출처

Spartan-Arun

가장 유용한 댓글

안녕하세요, 저는 "jsPdf"로 PDF를 생성하기 위해 Angular 6 및 "html2canvas"로 작업하고 있습니다. .... 숨겨진 div로 스크린샷을 찍고 싶었고 그것을 달성할 때까지 할 수 없었습니다.

캡처는 ID가 "html-pdf"인 div로 이루어집니다.

"HTML"
` 학생증 /a>

div id = "pdf" *ngIf = "테스트" 스타일 = "텍스트 정렬: 가운데, 여백 상단: 5px;">
div ID = "html-pdf">

/div
/div`

"js 또는 각도는 Typescript입니다"
`다운로드2() {
var imgcab: 문자열;
imgcab = this.base64logo.trim();

html2canvas(document.getElementById('html-pdf'), {scale:2}). 그런 다음 (함수(캔버스) {

var img = canvas.toDataURL("이미지 / png", 1);

var 문서 = 새 jsPDF({
방향: 'p',
단위: 'mm',
형식: '문자',
});

doc.addImage(img, 'PNG', 2,2,212,272);
doc.addImage(imgcab, 'JPEG', 5, 5,30,30);
doc.save('testCanvas.pdf');
});`

그리고 가장 중요한 것은 화면 안에 div를 숨기는 것입니다.

"CSS"
#pdf { overflow: hidden; height: 0; }

코드는 숨겨진 div "pdf" 안에 있는 div "html-pdf"의 캡처로 pdf를 만듭니다.

나는 당신이 그들을 섬기기를 바랍니다

나는 이것을 스페인어로 썼고 칠레에서 번역했습니다.

kuraudeo 에 2018년 07월 27일

👍14 ❤11

모든 10 댓글

Html2canvas는 display:none 스타일을 올바르게 해석하므로 숨겨진 요소를 렌더링하지 않습니다. 원하는 것을 달성하기 위해 페이지 뷰포트에서 보이는 요소를 절대적으로 배치할 수 있습니다("숨겨진 요소를 렌더링"하려는 경우).

herringtown 에 2016년 03월 11일

유용할 수 있습니다.
감사 해요 !

atefBB 에 2016년 09월 27일

div에 " display:none "이 아닌 CSS가 있는 경우에만 작동합니다. 그래서 .show() 및 .hide() 조합을 사용하여 요소를 보이거나 숨겨서 Canvas를 형성하도록 했습니다.

Spartan-Arun 에 2017년 01월 04일

       onclone: function(document) {
            hiddenDiv = document.getElementById("render");
            hiddenDiv.style.display = 'block';
        }

인터넷에서 정보를 찾았습니다. " display:none "을 사용하여 지정된 div에 CSS를 설정한 다음 위와 같이 onclone 옵션을 추가할 수 있습니다. Plz는 "loggin: true" 옵션을 추가하여 무슨 일이 일어나는지 확인하십시오

karsondang 에 2017년 01월 23일

실제로 위치 절대 및 상단/왼쪽 음수 값을 사용하여 뷰포트에서 컨테이너를 내보내는 트릭 - Firefox에서는 작동하지 않으며 NS_ERROR_FAILURE 예외가 발생합니다.

Chrome에서는 작동하지만

nettiopsu 에 2018년 02월 14일

나는 아주 최근에 이 문제에 부딪쳤고 특정 div가 보이지 않고 스크린샷으로 찍히도록 하려면 CSS 속성을 다음과 같이 설정하십시오.

height: 0%
overflow:hidden

kchen1025 에 2018년 06월 07일

😕5 👎2 👍2

이것은 나를 위해 작동하지 않습니다 @ kchen1025

chidiwilliams 에 2018년 07월 14일

대상 div 직후에 캔버스를 생성한 다음 캔버스가 로드된 직후 div를 숨겼습니다. 깜박임은 거의 눈에 띄지 않습니다.

내 코드는 다음과 같습니다.

<div id="capture">
  ...
</div>
<div id="end"></div>

html2canvas(document.querySelector("#capture")).then(canvas => {
  $("#end").append(canvas)
  $("#capture").hide()
});