Html2canvas: Renderiza apenas o que está à vista

De alguma forma nos seus exemplos na página inicial mostra tudo no corpo, mesmo o que não está à vista ... como você fez isso?

Possível duplicata em: https://github.com/niklasvh/html2canvas/issues/117

Então, eu quero saber como posso capturar um elemento específico? Alguém tem solução？

@justein Experimente isto

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

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

Posso confirmar esse comportamento com a versão mais recente. Ele renderizará o tamanho correto do objeto solicitado, mas não renderizará realmente na tela nada que esteja fora da tela da janela de visualização atual. Então se o

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

está atualmente visível no navegador, ele será renderizado. Se estiver fora da tela, a tela está em branco (mas do tamanho certo). Parcialmente visível: parcialmente renderizado. O meu não age como scrollHeight = 0, ele renderiza tudo o que é visível quando o código é executado. (Meu botão está na parte inferior).

Como o comentário do btm, gostaria de saber como isso é feito no site de exemplo. Poderia estar contando com algo no Angular ou Bootstrap para obter os recursos fora da tela?

@cchubb Eu não entendo o que Angle e Bootstrap tem a ver com isso. O problema de John, parece-me uma questão de renderizar um elemento específico.

Se você quiser renderizar que está fora da janela de visualização, basta usar

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

Se você deseja renderizar os elementos "overflow", remova o "overflow" no tempo de execução e adicione-os novamente após o processo usando javascript para adicionar className, como este:

.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 = "";
});

Ou apenas aponte o html2canvas para renderizar o elemento dentro do elemento com "overflow", como este:

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

Realmente tem muitas sugestões de recursos que são desnecessários do meu ponto de vista, basta direcionar os elementos DOM corretos e usar o "CSS" a seu favor.

Eu descobri. Você corrigiu em 0.5.0-alpha2. Se eu usar a versão 0.5.0-alpha1, ela se encaixará, mas a versão alpha2 não. Eu nem percebi que alpha2 estava disponível porque a página de lançamentos estava focando em alpha1.

Aqui está um violino que demonstra que ele está funcionando agora com o alpha2. https://jsfiddle.net/cchubb/fy7tw7ek/1/ se você alterar o recurso externo de volta para alpha1, ele será cortado quando o link inferior for clicado. (Você precisa salvar o arquivo de download como .png para visualizá-lo; o fiddles não me permite alterar a janela de saída href para data.)

@ btm1 , tente atualizar para Alpha2.

@cchubb Vou tentar.

@cchubb o problema subjacente foi corrigido no alfa 2 e você está certo, está bem escondido. Eu nem percebi que havia um alfa 2.

Hmm, para mim, mesmo em alpha2, apenas a parte do elemento que está "visível" na janela de exibição é renderizada. Consulte http://jsfiddle.net/NPC42/ykvL6a17/ para uma demonstração — html2canvas exporta apenas as linhas que são roladas para a janela de visualização (independentemente de serem visíveis no div de contêiner rolado ou não).

Estou chamando html2canvas de errado de alguma forma? Quando eu testo em meu código real (não no JSFiddle, que criei apenas para a demonstração), esta sugestão ajuda a renderizar todo o elemento: https://github.com/niklasvh/html2canvas/issues/650 , mas espero para evitar hackear a biblioteca.

@NPC Ele não irá apenas renderizar o que não está à vista sem você fazer nada, você tem que alterá-lo para visível de overflow ---> exportar muito rapidamente ---> então alterá-lo de volta para rolar novamente ou não funcionará. Não é ideal OMI, acho que deveria haver uma opção para apenas fazer funcionar, mas pelo menos ele faz.

@ btm1 , sim, suponho que não seja essa a intenção, já que passo o elemento que está dentro do rolado, o elemento em si não tem nenhum corte de estouro.

Por enquanto, no meu aplicativo, descobri que preciso reconectar todo o meu elemento ao corpo, forçando a largura / altura específica nele (uma vez que contém elementos absolutamente posicionados), enquanto isso cobrindo toda esta cozinha por uma tela inteira "Preparando a exportação, aguarde "sobreposição, porque o html2canvas leva mais de 10 segundos para renderizar tudo. Depois que a renderização é feita, eu coloco de volta no local original (dentro de um contêiner rolado), removendo a largura / altura.

Pesado, mas funciona.

Estranhamente, ele só renderiza a partir do limite superior visível do elemento fornecido.

Experimente https://jsfiddle.net/bianjp/bpc3nq69/1/. Vá até "Print Screen" e clique nele. A imagem gerada não incluirá as linhas superiores que não são visíveis quando clicadas.
Usando a versão 0.5.0.beta4.

A solução é chamar $('html, body').scrollTop(0) (ou qualquer outra forma de tornar a parte superior do elemento visível) antes de chamar html2canvas.

obrigado @bianjp pela correção proposta.

Estranhamente, ele só renderiza a partir do limite superior visível do elemento fornecido.

É um comportamento normal ... Parece-me muito estranho!

+1

Esta resposta SO funcionou para mim.

Antes de chamar html2canvas, role o elemento que deseja renderizar na janela de visualização.

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

Funciona para mim.
A versão usada é 0.5.0-beta4.

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

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.

Ei, @niklashvh

Eu também estava enfrentando o problema de tirar um instantâneo visível apenas para o DOM. Eu tenho a versão 0.5.0-beta4
Portanto, concordo com a solução @ziyoung . Eu fiz o mesmo como ele sugeriu.

           `$('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();
          }
        })`

Portanto, defino a posição div no topo 0 para o corpo e chamo html2canvas. Então, de acordo com minha experiência, eu recomendei usar a versão 0.5.0-beta4 de @eKoopmans para que você possa evitar o problema de

Isso funciona no desktop, mas não funciona no celular

O que eu fiz foi window.scrolTo(0,0) antes de chamar htmltocanvas (), se você estiver no topo da tela, o div é impresso completo