Html2canvas: Html2canvas, tela cortada ao usar girar imagem

Olá @ amine86 , este é um problema de como o html2canvas lida com o recorte de elementos transformados, que comecei a corrigir nesta solicitação de pull . Eu criei uma versão simplificada do seu Fiddle usando apenas html2canvas aqui (e uma usando o html2canvas original, sem meu pull request incorporado, aqui ).

É um problema complicado que acredito requer uma reescrita de como o recorte é executado no html2canvas. Consegui consertar transform: translate() problemas, mas as rotações são um problema diferente que não consigo resolver da mesma maneira.

Olá @eKoopmans, muito obrigado por sua ajuda, infelizmente não posso usar isso no meu projeto sem corrigir esse problema de rotação, você conhecia algum plugin ou script que funciona bem pode converter html para canvas ou html para svg? Mesmo um truque que precisa comprar licença?

Obrigado pela ajuda

Olá @ amine86 , talvez você tenha sorte com essa abordagem, renderizando HTML por meio de um SVG e depois em uma tela:
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas

Há também rasterizeHTML , que é semelhante a html2canvas. Eu não tentei muito nenhuma das abordagens, deixe-me saber se elas funcionam para você!

Oi @ekoopmans

 RasterizeHTML does not work good on some browser,
 I tried to find a solution but without succes for html2canvas, the result is not the same, on each test with a rotate I got a different design,  I think I will switch to try to create my design with imageGD from php librairie,

Anyway I want to thank you for your feedback and helps, thanks my friend,

Fale-me sobre uma coisa, em 0.5.0-beta4 você adiciona alguma funcionalidade de teste para isso. Podemos ver onde está o código da parte para tentar contribuir e obter alguns bons resultados? Obrigado!

Olá @CreativForm , sim, é uma boa ideia, @eKoopmans você pode nos ajudar com isso?

Olá, não tenho certeza de qual funcionalidade de teste você está descrevendo. Você pode ver o trabalho que fiz para corrigir o corte de transformação CSS aqui .

@eKoopmans Espero que você esteja bem, alguma notícia sobre esse assunto?
Você já adicionou uma correção ao seu módulo html2PDF?

Obrigada,

Ei @ amine86 , estou ótimo, obrigado! Nenhum progresso, infelizmente ... Estou finalmente tendo algum tempo para voltar à codificação agora, então vou ver se consigo fazer isso em breve.

Ei @eKoopmans , obrigado pela sua resposta, Espero que você possa resolver isso em breve, obrigado pela sua ajuda

Olá @eKoopmans , Espero que esteja bem, algum upgrade no seu módulo "html2PDF" para esta edição do rotate?

Obrigado,

Não, mas obrigado pelo lembrete. Você deve ter notado que acabei de retornar ao projeto após um longo hiato. Parece que @niklasvh acabou de lançar um alfa v1.0.0 ontem, que pode conter algumas respostas!

@niklasvh se você estiver lendo, desculpe, não fiz nada para ajudar com o html2canvas. Espero que esteja tudo bem!

Olá @eKoopmans, muito obrigado pela sua resposta rápida,
Sim, testei a versão mais recente, mas percebi que sempre tinha o mesmo problema ao usar um giro (o resultado é cortado),
Neste último lançamento, ele perdeu uma "escala" que você usa em "html2pdf", você forneceu para adicioná-lo a ele?

@amineeg, você está falando sobre o último lançamento do html2canvas ou do html2pdf?

A versão mais recente do html2canvas tem a opção scale adicionada, embora não tenha dpi . Ele ainda não abordou esse problema de recorte e transformações CSS.

@eKoopmans sim você tem razão, contém escala, espero que esse problema de rotação seja resolvido em breve.
Muito obrigado por sua ajuda.

Eu tive o problema de corte com escala.
Ao dimensionar para uma imagem maior, funciona bem (por exemplo, escala de transformação (1,4))
Ao redimensionar para uma imagem menor, ele corta a imagem (por exemplo, escala de transformação (0,6))

Olá @eKoopmans , alguma notícia sobre este assunto? Podemos ajudá-lo de alguma forma a resolver esse problema de rotação?

Olá @eKoopmans @CreativForm ,

Alguma novidade para este bug?

Obrigado,

Olá @amineeg. Do meu lado, não, estou esperando @eKoopmans dizer algo. :)

Obrigado @CreativForm , @eKoopmans @niklasvh alguma notícia sobre este assunto?

@eKoopmans Algum movimento sobre este assunto?

Tente rolar a janela para o topo com:

window.scrollTo(0,0);

Eu mesmo testei essa solução e posso garantir que funcionou para mim - parece ser um bug do html2canvas.

Não sei por que, mas mesmo quando um elemento está completamente fora da tela, não é um problema. Mas não ser rolado até o topo é o que aparentemente parece fazer com que a imagem da tela capturada saia deslocada verticalmente pela quantidade de rolagem.

Isso faz com que a imagem resultante tenha a altura certa, mas comece a ser deslocada do topo por um número X de pixels, fazendo com que o topo da imagem tenha um espaço em branco.

Referência: https://stackoverflow.com/questions/40349075/html2canvas-image-is-getting-cut