Html2canvas: Retorna uma imagem em branco para qualquer elemento quando o corpo do documento tem mais de 30.000 px de altura.

Criado em 31 mai. 2016  ·  16Comentários  ·  Fonte: niklasvh/html2canvas

A biblioteca retorna uma imagem vazia quando o corpo do documento tem mais de 30.000 pixels. Você tentaria capturar um elemento de 100 x 100. Mas você obtém uma imagem em branco do elemento em um corpo alto.

Aqui está um violino que demonstra esse erro.

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

Você pode alterar o tamanho do corpo para menos de 30.000 e funciona bem.

Needs More Information
Fonte
picture charlie-lk

Comentários muito úteis

@niklasvh Esta é uma

  • Padrão de largura / altura máximas de acordo com os requisitos do navegador para tela
  • Divida e conquiste usando vários elementos de tela e retorne um array.
  • Lance um erro no console informando sobre as limitações do canvas e sugira maneiras de implementá-lo.

No meu caso, estou clonando o corpo inteiro e apenas configuro a largura / altura máxima: html2canvas(el, {height: 3000, width: 3000}) .

picture toadkicker em 10 out. 2018
👍9 ❤2 🎉2 👎1

Todos 16 comentários

Eu tenho exatamente o mesmo problema que você. Você encontrou alguma solução para isso?

Sebastianvarv picture Sebastianvarv em 15 fev. 2017

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

charlie-lk picture charlie-lk em 15 fev. 2017

emm, tenho o mesmo problema, mas finalmente descobri!
no meu caso, aqui está minha solução:
coloque um iframe em seu elemento de corpo, como

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

e cada elemento que você precisa converter para a tela, você pode copiá-los e colocá-los neste iframe, e usar html2canvas, e então removê-lo, assim

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 picture netweng em 25 out. 2017

Isso ainda é um problema com a v1.0.0 ? Em caso afirmativo, você poderia compartilhar um exemplo no jsfiddle .

niklasvh picture niklasvh em 12 dez. 2017

Este problema foi encerrado automaticamente porque não houve resposta ao nosso pedido de mais informações do autor original. Com apenas as informações que estão atualmente no problema, não temos informações suficientes para tomar medidas. Entre em contato se tiver ou encontre as respostas de que precisamos para que possamos investigar mais a fundo.

no-response[bot] picture no-response[bot] em 12 dez. 2017

oi quando tento exibir um iframe com uma câmera ip interna, ele retorna uma imagem vazia, por favor, você pode me ajudar?

AntonioDilorenzo picture AntonioDilorenzo em 21 ago. 2018

@niklasvh Esta é uma

  • Padrão de largura / altura máximas de acordo com os requisitos do navegador para tela
  • Divida e conquiste usando vários elementos de tela e retorne um array.
  • Lance um erro no console informando sobre as limitações do canvas e sugira maneiras de implementá-lo.

No meu caso, estou clonando o corpo inteiro e apenas configuro a largura / altura máxima: html2canvas(el, {height: 3000, width: 3000}) .

toadkicker picture toadkicker em 10 out. 2018
👍9 ❤2 🎉2 👎1

@toadkicker irmão, vc salve meu código / trabalho hoje hahahahahahahaht muito obrigado

leandrosouza0786 picture leandrosouza0786 em 26 set. 2019

@toadkicker Obrigado!

Liberateur picture Liberateur em 24 dez. 2019

emm, tenho o mesmo problema, mas finalmente descobri!
no meu caso, aqui está minha solução:
coloque um iframe em seu elemento de corpo, como

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

e cada elemento que você precisa converter para a tela, você pode copiá-los e colocá-los neste iframe, e usar html2canvas, e então removê-lo, assim

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);

Tentei esse método, mas não funcionou exatamente. No meu caminho, irei trabalhar com o código abaixo:

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);
});

E se quiser aplicar seu estilo css da mesma forma que no documento atual, você também precisa copiar o estilo para o 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 picture ricosmall em 16 mar. 2020

Novamente, esta é uma limitação do próprio navegador e esta biblioteca não trata o erro corretamente. Nenhuma solução de codificação além de limitar o número de pixels capturados irá alterá-lo.

toadkicker picture toadkicker em 16 mar. 2020

emm, tenho o mesmo problema, mas finalmente descobri!
no meu caso, aqui está minha solução:
coloque um iframe em seu elemento de corpo, como

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

e cada elemento que você precisa converter para a tela, você pode copiá-los e colocá-los neste iframe, e usar html2canvas, e então removê-lo, assim

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);

Tentei esse método, mas não funcionou exatamente. No meu caminho, irei trabalhar com o código abaixo:

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);
});

E se quiser aplicar seu estilo css da mesma forma que no documento atual, você também precisa copiar o estilo para o 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);
});

no meu caso, todos os elementos são svg ou estilo inline, então não preciso anexar a folha de estilo. mas sim, você deve adicionar sua folha de estilo, se necessário

netweng picture netweng em 30 mar. 2020

Eu enfrentei o mesmo problema. Eu precisava fazer uma imagem da janela modal (com posição fixa). Sempre recebi uma imagem branca. O problema estava na posição de rolagem. Este código funciona para mim:

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 picture invisor em 24 set. 2020
🎉5 👍3 ❤1

Funcionou para mim como um encanto! Obrigado pela solução inteligente!

flaviostutz picture flaviostutz em 30 set. 2020

@invisor lifesaver! Essa é a única coisa que funcionou para mim.

MEGApixel23 picture MEGApixel23 em 26 out. 2020

Essa opção também pode ser uma solução para rolagem de casos relacionados

{
  scrollX: 0,
  scrollY: -window.scrollY
}
seahindeniz picture seahindeniz em 9 nov. 2020
❤2 🎉1
Esta página foi útil?
0 / 5 - 0 avaliações

Questões relacionadas

celik75 picture celik75  ·  4Comentários
tibewww picture tibewww  ·  4Comentários
Juliazhong picture Juliazhong  ·  4Comentários
tjchambers32 picture tjchambers32  ·  3Comentários
anthonymejia picture anthonymejia  ·  4Comentários