Html2canvas: Style d'élément uniquement pour html2canvas?

Créé le 19 oct. 2015  ·  5Commentaires  ·  Source: niklasvh/html2canvas

J'utilise la balise pratique data-html2canvas-ignore sur quelques éléments, mais Firefox me pose des problèmes avec des éléments avec des marges négatives. J'aimerais pouvoir ajouter une balise de style html2canvas uniquement pour un élément particulier, tel que: data-html2canvas-style="margin-left: 0" .

Quelqu'un d'autre a-t-il eu de la chance de faire quelque chose comme ça?

Question

Commentaire le plus utile

Vous pouvez modifier le contenu du document (qui est un clone de l'original) qui sera rendu avec l'option onclone , par exemple:

html2canvas(document.body, {onclone: function(document) {
  document.querySelector('.something').style.marginLeft = 0;
}}).then(...)

Tous les 5 commentaires

Vous pouvez modifier le contenu du document (qui est un clone de l'original) qui sera rendu avec l'option onclone , par exemple:

html2canvas(document.body, {onclone: function(document) {
  document.querySelector('.something').style.marginLeft = 0;
}}).then(...)

Merci Nik! J'apprécie énormément votre travail sur cette bibliothèque. Est-ce dans la documentation?

Non, malheureusement non. La documentation fait largement défaut à bien des égards pour le moment ...

Mon image téléchargée n'obtient pas le style approprié, j'utilise donc un style calculé en style en ligne pour la restituer correctement en convertissant tout le style en CSS en ligne. Mais le problème avec cela est que cela affecte le dom d'origine. Je veux donc le faire pour l'élément cloné à la place dans la fonction onclone, mais cela ne fonctionne pas et l'image n'est pas correctement stylée. Une idée de pourquoi cela se produit?

J'ai essayé de faire la même chose, voici comment je l'ai implémenté et tous mes styles ont été correctement téléchargés:

const computedStyleToInlineStyle = require("computed-style-to-inline-style");

 html2canvas(document.querySelector(".someclass"), {onclone: function(document) {
     computedStyleToInlineStyle(document.querySelector(".someclass"), {
          recursive: true
      });
    }}).then(canvas => {
        const imgData = canvas.toDataURL('image/png');
        ...
    });
Cette page vous a été utile?
0 / 5 - 0 notes