Html2canvas: 문서 본문의 높이가 30,000px 이상인 경우 모든 요소에 대해 빈 이미지를 반환합니다.

에 만든 2016년 05월 31일 · 16코멘트 · 출처: niklasvh/html2canvas

라이브러리는 문서 본문이 30,000픽셀을 초과하면 빈 이미지를 반환합니다. 100 x 100의 요소를 캡처하려고 할 것입니다. 그러나 요소의 빈 이미지가 키가 큰 몸체에 있습니다.

다음은 이 오류를 보여주는 바이올린입니다.

https://jsfiddle.net/fvo1xh8b/2/

바디 사이즈는 30,000 이하로 변경하시면 잘 됩니다.

Needs More Information

출처

charlie-lk

가장 유용한 댓글

@niklasvh 어려운 작업이지만 사실 캔버스 크기의 한계 때문입니다. 올바른 행동을 구현하는 방법을 논의하기 위해 이것이 다시 열릴 필요가 있다고 생각합니다. 확실히 흰색으로 씻은 이미지는 올바른 동작이 아닙니다.

캔버스에 대한 브라우저 요구 사항에 따라 최대 너비/높이를 기본값으로 설정합니다.
여러 캔버스 요소를 사용하여 분할 및 정복하고 배열을 반환합니다.
캔버스 제한에 대해 조언하는 콘솔에서 오류를 발생시키고 이를 구현하는 방법을 제안합니다.

제 경우에는 전체 본문을 복제하고 최대 너비/높이를 설정합니다: html2canvas(el, {height: 3000, width: 3000}) .

toadkicker 에 2018년 10월 10일

👍9 ❤2 🎉2 👎1

모든 16 댓글

나는 당신과 똑같은 문제가 있습니다. 이에 대한 해결책을 찾았습니까?

Sebastianvarv 에 2017년 02월 15일

http://stackoverflow.com/questions/37520013/html2canvas-returns-invalid-image-when-the-body-height-is-more-than-30000-pixels

charlie-lk 에 2017년 02월 15일

음, 같은 문제가 발생했지만 마침내 알아냈습니다!
제 경우에는 다음과 같은 해결책이 있습니다.
다음과 같이 body 요소에 iframe을 넣으십시오.

<html>
  <head>
  #canvas_handler {
   position:absolute;
   left: -10000px;
  }
  </head>
  <body>
  <iframe id="canvas_handler" />
  </body>
</html>

캔버스로 변환하는 데 필요한 모든 요소를 복사하여 이 iframe에 넣고 html2canvas를 사용하여 다음과 같이 제거할 수 있습니다.

const copy_ele = origin_ele.cloneNode(true);
canvas_handler.appendChild(copy_ele);
canvas_handler.style.height = origin_ele.scrollHeight;
canvas_handler.style.width = origin_ele.scrollWidth;
html2canvas(copy_ele, {
      useCORS: true,
     }).then((canvas) => {
       // do your things
     });
canvas_handler.removeChild(table_ele);

netweng 에 2017년 10월 25일

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

niklasvh 에 2017년 12월 12일

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

no-response[bot] 에 2017년 12월 12일

안녕하세요, 내부 IP 카메라로 iframe을 스크리닝하려고 하면 무효 이미지가 반환됩니다. 도와주시겠습니까?

AntonioDilorenzo 에 2018년 08월 21일

캔버스에 대한 브라우저 요구 사항에 따라 최대 너비/높이를 기본값으로 설정합니다.
여러 캔버스 요소를 사용하여 분할 및 정복하고 배열을 반환합니다.
캔버스 제한에 대해 조언하는 콘솔에서 오류를 발생시키고 이를 구현하는 방법을 제안합니다.

제 경우에는 전체 본문을 복제하고 최대 너비/높이를 설정합니다: html2canvas(el, {height: 3000, width: 3000}) .

toadkicker 에 2018년 10월 10일

👍9 ❤2 🎉2 👎1

@toadkicker 형제, 오늘 내 코드/작업을 저장합니다 하하하하하하하 감사합니다

leandrosouza0786 에 2019년 09월 26일

@toadkicker 감사합니다!

Liberateur 에 2019년 12월 24일

음, 같은 문제가 발생했지만 마침내 알아냈습니다!
제 경우에는 다음과 같은 해결책이 있습니다.
다음과 같이 body 요소에 iframe을 넣으십시오.
<html>
  <head>
  #canvas_handler {
   position:absolute;
   left: -10000px;
  }
  </head>
  <body>
  <iframe id="canvas_handler" />
  </body>
</html>
캔버스로 변환하는 데 필요한 모든 요소를 복사하여 이 iframe에 넣고 html2canvas를 사용하여 다음과 같이 제거할 수 있습니다.
const copy_ele = origin_ele.cloneNode(true);
canvas_handler.appendChild(copy_ele);
canvas_handler.style.height = origin_ele.scrollHeight;
canvas_handler.style.width = origin_ele.scrollWidth;
html2canvas(copy_ele, {
      useCORS: true,
     }).then((canvas) => {
       // do your things
     });
canvas_handler.removeChild(table_ele);

이 방법을 시도했지만 정확히 작동하지 않습니다. 내 방식으로 아래 코드와 함께 작동합니다.

const copy_ele = origin_ele.cloneNode(true);
canvas_handler.contentDocument.body.appendChild(copy_ele);
canvas_handler.height = origin_ele.scrollHeight;
canvas_handler.width = origin_ele.scrollWidth;
html2canvas(canvas_handler.contentDocument.body, {
  useCORS: true,
}).then((canvas) => {
  // do your things
  canvas_handler.removeChild(copy_ele);
});

그리고 CSS 스타일을 현재 문서와 동일하게 적용하려면 스타일을 iframe에 복사해야 합니다.

// add style
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'your_style_file_url.css';
canvas_handler.contentDocument.head.appendChild(link);

const copy_ele = origin_ele.cloneNode(true);
canvas_handler.contentDocument.body.appendChild(copy_ele);
canvas_handler.height = origin_ele.scrollHeight;
canvas_handler.width = origin_ele.scrollWidth;
html2canvas(canvas_handler.contentDocument.body, {
  useCORS: true,
}).then((canvas) => {
  // do your things
  canvas_handler.removeChild(copy_ele);
});

ricosmall 에 2020년 03월 16일

다시 말하지만 이것은 브라우저 자체의 한계이며 이 라이브러리는 오류를 올바르게 처리하지 않습니다. 캡처된 픽셀 수를 제한하는 것 외에는 코딩 솔루션이 변경되지 않습니다.

toadkicker 에 2020년 03월 16일

음, 같은 문제가 발생했지만 마침내 알아냈습니다!
제 경우에는 다음과 같은 해결책이 있습니다.
다음과 같이 body 요소에 iframe을 넣으십시오.
<html>
  <head>
  #canvas_handler {
   position:absolute;
   left: -10000px;
  }
  </head>
  <body>
  <iframe id="canvas_handler" />
  </body>
</html>
캔버스로 변환하는 데 필요한 모든 요소를 복사하여 이 iframe에 넣고 html2canvas를 사용하여 다음과 같이 제거할 수 있습니다.
const copy_ele = origin_ele.cloneNode(true);
canvas_handler.appendChild(copy_ele);
canvas_handler.style.height = origin_ele.scrollHeight;
canvas_handler.style.width = origin_ele.scrollWidth;
html2canvas(copy_ele, {
      useCORS: true,
     }).then((canvas) => {
       // do your things
     });
canvas_handler.removeChild(table_ele);
이 방법을 시도했지만 정확히 작동하지 않습니다. 내 방식으로 아래 코드와 함께 작동합니다.
const copy_ele = origin_ele.cloneNode(true);
canvas_handler.contentDocument.body.appendChild(copy_ele);
canvas_handler.height = origin_ele.scrollHeight;
canvas_handler.width = origin_ele.scrollWidth;
html2canvas(canvas_handler.contentDocument.body, {
  useCORS: true,
}).then((canvas) => {
  // do your things
  canvas_handler.removeChild(copy_ele);
});
그리고 CSS 스타일을 현재 문서와 동일하게 적용하려면 스타일을 iframe에 복사해야 합니다.
// add style
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'your_style_file_url.css';
canvas_handler.contentDocument.head.appendChild(link);

const copy_ele = origin_ele.cloneNode(true);
canvas_handler.contentDocument.body.appendChild(copy_ele);
canvas_handler.height = origin_ele.scrollHeight;
canvas_handler.width = origin_ele.scrollWidth;
html2canvas(canvas_handler.contentDocument.body, {
  useCORS: true,
}).then((canvas) => {
  // do your things
  canvas_handler.removeChild(copy_ele);
});

제 경우에는 모든 요소가 svg 또는 인라인 스타일이므로 스타일시트를 추가할 필요가 없습니다. 하지만 예, 필요한 경우 스타일시트를 추가해야 합니다.

netweng 에 2020년 03월 30일

나는 같은 문제에 직면했다. 모달 창(고정 위치)에서 이미지를 만들어야 했습니다. 나는 항상 흰색 이미지를 받았습니다. 문제는 스크롤 위치에 있었습니다. 이 코드는 저에게 효과적입니다.

const el = document.getElementById('html-to-canvas-area')
const area = el.getBoundingClientRect()
html2canvas(el, {
  scrollX: 0,
  scrollY: 0,
  width: area.width,
  height: area.height
})

invisor 에 2020년 09월 24일

🎉5 👍3 ❤1

매력처럼 나를 위해 일했습니다! 영리한 솔루션에 감사드립니다!

flaviostutz 에 2020년 09월 30일

@invisor 생명의 은인! 그것이 나를 위해 일한 유일한 것입니다.

MEGApixel23 에 2020년 10월 26일

이 옵션은 관련 사례를 스크롤하기 위한 솔루션일 수도 있습니다.

{
  scrollX: 0,
  scrollY: -window.scrollY
}

seahindeniz 에 2020년 11월 09일

❤2 🎉1

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급

Html2canvas: 문서 본문의 높이가 30,000px 이상인 경우 모든 요소에 대해 빈 이미지를 반환합니다.

가장 유용한 댓글

모든 16 댓글

관련 문제