<p>promessa html2canvas retornada antes da renderização completa</p>

Criado em 1 out. 2019 · 3Comentários · Fonte: niklasvh/html2canvas

Certifique-se de que está testando com a versão mais recente
Versões antigas não são suportadas e os problemas relatados para elas serão encerrados.

Siga as etapas gerais de solução de problemas primeiro:

[X] Você está usando a versão mais
[X] Você está testando usando a versão não reduzida do html2canvas e verificou todos os possíveis problemas relatados no console

Relatório de erros:

Eu tenho uma página com vários divs. Cada um desses divs tem vários elementos de tabela de reação . Quero fazer uma captura de tela de cada div e, em seguida, criar um arquivo zip e fazer o download de todos de uma vez (como uma espécie de apresentação de slides em PowerPoint). Isso funciona perfeitamente no Mac, no entanto, quando estou usando o Google Chrome no Windows, os divs com várias tabelas de reação parecem não terminar de renderizar quando a captura de tela é tirada. Confirmei ativando o log de que a renderização é concluída em ~ 1000ms, mas o canvas que o html2canvas retorna parece que não terminou a renderização. As tabelas de reação são renderizadas, mas o resto do texto na página é um tanto transparente, como se o carregamento estivesse na metade.

Ainda não tenho uma reprodução do jsfiddle, mas vou trabalhar nisso para adicionar uma aqui.

Especificações:

Versão html2canvas testada com:
Navegador e versão: Chrome mais recente - 77.0.3865.90
Sistema operacional: Windows (importante, não é possível reproduzir em um Mac)

Fonte

tjchambers32

👍6

Comentários muito úteis

Eu também encontrei esse problema e ele causou um bug muito ruim em nossa extremidade. Gostaria de consertar!

gregroyal em 12 nov. 2019

👍5

Todos 3 comentários

Consegui fazer isso funcionar, embora não seja o ideal.

html2canvas(div, {
    letterRendering: true,
    onclone: (doc) => {
        // onclone logic to resize div

        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve()
            }, 400)
        })
    }
}).then((obj) => {
    let img = obj.toDataURL()
    // save image to zip file
})

Cheguei ao tempo limite de 400ms por tentativa e erro. Qualquer coisa menos, e eu observei o problema com o div não sendo completamente renderizado quando o html2canvas faz a captura de tela.

tjchambers32 em 2 out. 2019

🚀2

Eu concordo, eu tive um problema muito semelhante, onde as imagens geradas por Html2Canvas estavam sendo cortadas. Isso só aconteceu em compilações de produção. Em ambientes de desenvolvimento, funcionou bem. A solução acima resolve meu problema. Eu concordo que não é o ideal, e uma correção adequada é necessária para isso, mas por enquanto ele resolve meu problema. Obrigado @ tjchambers32 por esta