Html2canvas: Renvoie une image vide pour n'importe quel élément lorsque le corps du document mesure plus de 30 000 pixels.

Créé le 31 mai 2016 · 16Commentaires · Source: niklasvh/html2canvas

La bibliothèque renvoie une image vide lorsque le corps du document fait plus de 30 000 pixels. Vous essaieriez de capturer un élément de 100 x 100. Mais vous obtenez une image vierge de l'élément sur un grand corps.

Voici un violon qui démontre cette erreur.

https://jsfiddle.net/fvo1xh8b/2/

Vous pouvez changer la taille du corps à moins de 30 000 et cela fonctionne bien.

Needs More Information

Source

charlie-lk

Commentaire le plus utile

@niklasvh C'est difficile mais c'est en fait dû aux limitations de la taille de la toile. Je pense que cela doit être réouvert pour discuter de la façon de mettre en œuvre les bons comportements. Une image blanchie à la chaux n'est certainement pas le comportement correct.

Par défaut la largeur/hauteur maximale aux exigences du navigateur pour le canevas
Divisez pour régner à l'aide de plusieurs éléments de canevas et renvoyez un tableau.
Jetez une erreur dans la console indiquant les limitations du canevas et suggérez des moyens de l'implémenter.

Dans mon cas, je clone tout le corps et je définis simplement la largeur/hauteur maximale : html2canvas(el, {height: 3000, width: 3000}) .

toadkicker le 10 oct. 2018

👍9 ❤2 🎉2 👎1

Tous les 16 commentaires

J'ai exactement le même problème que toi. Avez-vous trouvé une solution à cela?

Sebastianvarv le 15 févr. 2017

http://stackoverflow.com/questions/37520013/html2canvas-returns-invalid-image-when-the-body-height-is-more-than-30000-pixels

charlie-lk le 15 févr. 2017

euh, j'ai le même problème, mais finalement, j'ai compris !
dans mon cas, voici ma solution:
mettre un iframe dans votre élément de corps, comme

<html>
  <head>
  #canvas_handler {
   position:absolute;
   left: -10000px;
  }
  </head>
  <body>
  <iframe id="canvas_handler" />
  </body>
</html>

et chaque élément que vous devez convertir en canvas, vous pouvez les copier et les mettre dans cet iframe, et utiliser html2canvas, puis le supprimer, comme ceci

const copy_ele = origin_ele.cloneNode(true);
canvas_handler.appendChild(copy_ele);
canvas_handler.style.height = origin_ele.scrollHeight;
canvas_handler.style.width = origin_ele.scrollWidth;
html2canvas(copy_ele, {
      useCORS: true,
     }).then((canvas) => {
       // do your things
     });
canvas_handler.removeChild(table_ele);

netweng le 25 oct. 2017

Est-ce toujours un problème avec la v1.0.0 ? Si oui, pourriez-vous s'il vous plaît partager un exemple sur jsfiddle .

niklasvh le 12 déc. 2017

Ce problème a été automatiquement fermé car il n'y a pas eu de réponse à notre demande d'informations supplémentaires de la part de l'auteur d'origine. Avec seulement les informations qui sont actuellement dans le problème, nous n'avons pas assez d'informations pour prendre des mesures. Veuillez nous contacter si vous avez ou trouvez les réponses dont nous avons besoin afin que nous puissions approfondir nos recherches.

no-response[bot] le 12 déc. 2017

salut, lorsque j'essaie de filtrer un iframe avec une caméra ip interne, cela renvoie une image vide, pouvez-vous m'aider s'il vous plaît?

AntonioDilorenzo le 21 août 2018

Par défaut la largeur/hauteur maximale aux exigences du navigateur pour le canevas
Divisez pour régner à l'aide de plusieurs éléments de canevas et renvoyez un tableau.
Jetez une erreur dans la console indiquant les limitations du canevas et suggérez des moyens de l'implémenter.

Dans mon cas, je clone tout le corps et je définis simplement la largeur/hauteur maximale : html2canvas(el, {height: 3000, width: 3000}) .

toadkicker le 10 oct. 2018

👍9 ❤2 🎉2 👎1

@toadkicker frère, tu

leandrosouza0786 le 26 sept. 2019

@toadkicker Merci !

Liberateur le 24 déc. 2019

euh, j'ai le même problème, mais finalement, j'ai compris !
dans mon cas, voici ma solution:
mettre un iframe dans votre élément de corps, comme
<html>
  <head>
  #canvas_handler {
   position:absolute;
   left: -10000px;
  }
  </head>
  <body>
  <iframe id="canvas_handler" />
  </body>
</html>
et chaque élément que vous devez convertir en canvas, vous pouvez les copier et les mettre dans cet iframe, et utiliser html2canvas, puis le supprimer, comme ceci
const copy_ele = origin_ele.cloneNode(true);
canvas_handler.appendChild(copy_ele);
canvas_handler.style.height = origin_ele.scrollHeight;
canvas_handler.style.width = origin_ele.scrollWidth;
html2canvas(copy_ele, {
      useCORS: true,
     }).then((canvas) => {
       // do your things
     });
canvas_handler.removeChild(table_ele);

J'ai essayé cette méthode, mais ne fonctionne pas exactement. À ma façon, fonctionnera avec le code ci-dessous :

const copy_ele = origin_ele.cloneNode(true);
canvas_handler.contentDocument.body.appendChild(copy_ele);
canvas_handler.height = origin_ele.scrollHeight;
canvas_handler.width = origin_ele.scrollWidth;
html2canvas(canvas_handler.contentDocument.body, {
  useCORS: true,
}).then((canvas) => {
  // do your things
  canvas_handler.removeChild(copy_ele);
});

Et si vous souhaitez appliquer votre style CSS de la même manière que dans le document actuel, vous devez également copier le style dans l'iframe :

// add style
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'your_style_file_url.css';
canvas_handler.contentDocument.head.appendChild(link);

const copy_ele = origin_ele.cloneNode(true);
canvas_handler.contentDocument.body.appendChild(copy_ele);
canvas_handler.height = origin_ele.scrollHeight;
canvas_handler.width = origin_ele.scrollWidth;
html2canvas(canvas_handler.contentDocument.body, {
  useCORS: true,
}).then((canvas) => {
  // do your things
  canvas_handler.removeChild(copy_ele);
});

ricosmall le 16 mars 2020

Encore une fois, il s'agit d'une limitation dans le navigateur lui-même et cette bibliothèque ne gère pas correctement l'erreur. Aucune solution de codage en dehors de la limitation du nombre de pixels capturés ne le changera.

toadkicker le 16 mars 2020

euh, j'ai le même problème, mais finalement, j'ai compris !
dans mon cas, voici ma solution:
mettre un iframe dans votre élément de corps, comme
<html>
  <head>
  #canvas_handler {
   position:absolute;
   left: -10000px;
  }
  </head>
  <body>
  <iframe id="canvas_handler" />
  </body>
</html>
et chaque élément que vous devez convertir en canvas, vous pouvez les copier et les mettre dans cet iframe, et utiliser html2canvas, puis le supprimer, comme ceci
const copy_ele = origin_ele.cloneNode(true);
canvas_handler.appendChild(copy_ele);
canvas_handler.style.height = origin_ele.scrollHeight;
canvas_handler.style.width = origin_ele.scrollWidth;
html2canvas(copy_ele, {
      useCORS: true,
     }).then((canvas) => {
       // do your things
     });
canvas_handler.removeChild(table_ele);

J'ai essayé cette méthode, mais ne fonctionne pas exactement. À ma façon, fonctionnera avec le code ci-dessous :

const copy_ele = origin_ele.cloneNode(true);
canvas_handler.contentDocument.body.appendChild(copy_ele);
canvas_handler.height = origin_ele.scrollHeight;
canvas_handler.width = origin_ele.scrollWidth;
html2canvas(canvas_handler.contentDocument.body, {
  useCORS: true,
}).then((canvas) => {
  // do your things
  canvas_handler.removeChild(copy_ele);
});

Et si vous souhaitez appliquer votre style CSS de la même manière que dans le document actuel, vous devez également copier le style dans l'iframe :

// add style
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'your_style_file_url.css';
canvas_handler.contentDocument.head.appendChild(link);

const copy_ele = origin_ele.cloneNode(true);
canvas_handler.contentDocument.body.appendChild(copy_ele);
canvas_handler.height = origin_ele.scrollHeight;
canvas_handler.width = origin_ele.scrollWidth;
html2canvas(canvas_handler.contentDocument.body, {
  useCORS: true,
}).then((canvas) => {
  // do your things
  canvas_handler.removeChild(copy_ele);
});

dans mon cas, tous les éléments sont de style svg ou en ligne, je n'ai donc pas besoin d'ajouter de feuille de style. mais oui, vous devriez ajouter votre feuille de style si besoin

netweng le 30 mars 2020

J'ai été confronté au même problème. J'avais besoin de faire une image à partir de la fenêtre modale (avec position fixe). J'ai toujours reçu une image blanche. Le problème était dans la position de défilement. Ce code fonctionne pour moi :

const el = document.getElementById('html-to-canvas-area')
const area = el.getBoundingClientRect()
html2canvas(el, {
  scrollX: 0,
  scrollY: 0,
  width: area.width,
  height: area.height
})

invisor le 24 sept. 2020

🎉5 👍3 ❤1

A fonctionné pour moi comme un charme! Merci pour la solution intelligente!

flaviostutz le 30 sept. 2020

@invisor bouée de sauvetage ! C'est la seule chose qui a fonctionné pour moi.

MEGApixel23 le 26 oct. 2020

Ces options peuvent également être une solution pour faire défiler les cas liés

{
  scrollX: 0,
  scrollY: -window.scrollY
}

seahindeniz le 9 nov. 2020

❤2 🎉1

Cette page vous a été utile?

0 / 5 - 0 notes

Questions connexes

la police arabe n'était pas prise en charge

yasergh · 5Commentaires

la position de défilement ne peut pas être capturée dans 1.0.0-alpha.1

AlphaDu · 4Commentaires

prise en charge de l'image de masque css/-webkit-mask-image

celik75 · 4Commentaires

TypeError : Impossible de lire la propriété "pile" de null - v0.5.0-alpha1

wbarrantes · 3Commentaires

Le rendu SVG avec css intégré/externe ne fonctionne pas

arzyu · 3Commentaires