Html2canvas: Html2canvas, toile recadrée lors de l'utilisation de la rotation de l'image

Salut @ amine86 , c'est un problème avec la façon dont html2canvas gère le découpage des éléments transformés, que j'ai commencé à corriger dans cette pull request . J'ai créé une version simplifiée de votre Fiddle en utilisant uniquement html2canvas ici (et une en utilisant les html2canvas d'origine, sans ma pull request incorporée, ici ).

C'est un problème délicat qui, je pense, nécessite une réécriture de la façon dont le découpage est effectué dans html2canvas. J'ai pu résoudre les problèmes de transform: translate() , mais les rotations sont un problème différent que je ne peux pas résoudre de la même manière.

Salut @eKoopmans merci beaucoup pour votre aide, malheureusement, je ne peux pas utiliser cela sur mon projet sans résoudre ce problème de rotation, saviez-vous qu'un plugin ou un script qui fonctionne bien peut convertir du HTML en toile ou du HTML en svg? Même une astuce pour acheter une licence?

Merci pour ton aide

Salut @ amine86 , vous pourriez avoir de la chance avec cette approche, rendant le HTML via un SVG puis dans un canevas:
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas

Il y a aussi rasterizeHTML , qui est similaire à html2canvas. Je n'ai pas beaucoup essayé l'une ou l'autre approche, faites-moi savoir si elles fonctionnent pour vous!

Salut @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,

Parlez-moi de quelque chose, dans la version 0.5.0-beta4, vous ajoutez quelques fonctionnalités de test pour cela. Pouvons-nous voir où est ce code de pièce pour essayer de contribuer et obtenir de bons résultats? Merci!

Salut @CreativForm , oui c'est une bonne idée, @eKoopmans pouvez-vous nous aider avec ça?

Salut, je ne suis pas sûr de la fonctionnalité de test que vous décrivez. Vous pouvez voir le travail que j'ai effectué pour corriger le recadrage CSS-transform ici .

@eKoopmans J'espère que vous allez bien, des nouvelles à ce sujet?
Avez-vous déjà ajouté un correctif à votre module html2PDF?

Merci,

Hé @ amine86 , je fais un grand merci! Pas de progrès malheureusement ... J'ai enfin le temps de revenir au codage maintenant, donc je vais voir si je peux le faire bientôt.

Hey @eKoopmans , merci pour votre réponse,

Bonjour @eKoopmans , j'espère que vous allez bien, une mise à jour sur votre module "html2PDF" pour ce numéro de la rotation?

Merci,

Non, mais merci pour le rappel. Vous avez peut-être remarqué que je viens de revenir au projet après une longue interruption. On dirait que @niklasvh vient de publier hier une version alpha v1.0.0, qui peut contenir des réponses!

@niklasvh si vous lisez, désolé, je n'ai rien fait pour vous aider avec html2canvas. J'espère que ça se passe bien!

Bonjour @eKoopmans merci beaucoup pour votre réponse rapide,
Oui, j'ai testé la dernière version, mais j'ai remarqué que j'avais toujours le même problème lors de l'utilisation d'une rotation (le résultat est recadré),
Dans cette dernière version, il a manqué une "échelle" que vous utilisez dans "html2pdf", avez-vous prévu de l'ajouter?

@amineeg parlez-vous de la dernière version de html2canvas ou html2pdf?

La dernière version de html2canvas a l'option scale ajoutée, bien qu'elle n'ait pas dpi . Il n'a pas encore résolu ce problème de découpage et de transformations CSS.

@eKoopmans oui vous avez raison, il contient de l'échelle, j'espère que ce problème de rotation sera bientôt résolu.
Merci beaucoup pour votre aide.

J'ai eu le problème d'écrêtage avec l'échelle.
Lors de la mise à l'échelle vers une image plus grande, cela fonctionne très bien (par exemple, l'échelle de transformation (1.4))
Lors de la mise à l'échelle vers une image plus petite, il découpe l'image (par exemple, l'échelle de transformation (0,6))

Salut @eKoopmans , des nouvelles concernant ce problème? Pouvons-nous vous aider d'une manière ou d'une autre à résoudre ce problème de rotation?

Bonjour @eKoopmans @CreativForm ,

Des nouvelles pour ce bug?

Merci,

Salut @amineeg De mon côté non, j'attends @eKoopmans pour dire quelque chose. :)

Merci @CreativForm , @eKoopmans @niklasvh des nouvelles sur ce problème?

@eKoopmans Un mouvement sur cette question?

Essayez de faire défiler la fenêtre vers le haut avec:

window.scrollTo(0,0);

J'ai testé cette solution moi-même et je peux garantir qu'elle a fonctionné pour moi - cela semble être un bogue avec html2canvas.

Je ne sais pas pourquoi, mais même lorsqu'un élément est complètement hors écran, ce n'est pas un problème. Mais ne pas faire défiler tout le chemin vers le haut est ce qui semble apparemment provoquer le décalage vertical de l'image de la toile capturée en fonction de la quantité de défilement.

Cela fait que l'image résultante a la bonne hauteur mais commence par un décalage à partir du haut d'un nombre X de pixels, ce qui fait que le haut de l'image a un espace vide.

Référence: https://stackoverflow.com/questions/40349075/html2canvas-image-is-getting-cut