Html2canvas: Gibt ein leeres Bild für jedes Element zurück, wenn der Dokumenttext mehr als 30.000 Pixel groß ist.

Erstellt am 31. Mai 2016  ·  16Kommentare  ·  Quelle: niklasvh/html2canvas

Die Bibliothek gibt ein leeres Bild zurück, wenn der Textkörper des Dokuments mehr als 30.000 Pixel beträgt. Sie würden versuchen, ein Element von 100 x 100 zu erfassen. Sie erhalten jedoch ein leeres Bild des Elements auf einem großen Körper.

Hier ist eine Geige, die diesen Fehler demonstriert.

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

Sie können die Körpergröße auf weniger als 30.000 ändern und es funktioniert gut.

Needs More Information
Quelle
picture charlie-lk

Hilfreichster Kommentar

@niklasvh Dies ist eine schwierige

  • Legen Sie die maximale Breite/Höhe gemäß den Browseranforderungen für die Leinwand fest
  • Teilen und erobern Sie mit mehreren Canvas-Elementen und geben Sie ein Array zurück.
  • Geben Sie einen Fehler in der Konsole aus, der Sie zu den Canvas-Einschränkungen berät, und schlagen Sie Möglichkeiten zur Implementierung vor.

In meinem Fall klone ich den gesamten Körper und setze nur die maximale Breite/Höhe: html2canvas(el, {height: 3000, width: 3000}) .

picture toadkicker am 10. Okt. 2018
👍9 ❤2 🎉2 👎1

Alle 16 Kommentare

ich habe genau das gleiche Problem wie du. Haben Sie hierfür eine Lösung gefunden?

Sebastianvarv picture Sebastianvarv am 15. Feb. 2017

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

charlie-lk picture charlie-lk am 15. Feb. 2017

emm, ich habe das gleiche Problem, aber endlich habe ich es herausgefunden!
In meinem Fall hier meine Lösung:
füge einen iframe in dein Körperelement ein, wie

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

und jedes Element, das Sie auf die Leinwand übertragen müssen, können Sie kopieren und in diesen iframe einfügen und html2canvas verwenden und es dann wie folgt entfernen

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 picture netweng am 25. Okt. 2017

Ist das immer noch ein Problem mit v1.0.0 ? Wenn ja, könnten Sie bitte ein Beispiel auf jsfiddle teilen .

niklasvh picture niklasvh am 12. Dez. 2017

Dieses Problem wurde automatisch geschlossen, da unsere Anfrage nach weiteren Informationen vom ursprünglichen Autor nicht beantwortet wurde. Mit den Informationen, die derzeit in der Ausgabe enthalten sind, haben wir nicht genügend Informationen, um Maßnahmen zu ergreifen. Bitte wenden Sie sich an uns, wenn Sie die Antworten haben oder finden, die wir benötigen, damit wir weitere Nachforschungen anstellen können.

no-response[bot] picture no-response[bot] am 12. Dez. 2017

Hallo, wenn ich versuche, einen iframe mit einer internen IP-Kamera zu überprüfen, wird ein leeres Bild zurückgegeben. Können Sie mir bitte helfen?

AntonioDilorenzo picture AntonioDilorenzo am 21. Aug. 2018

@niklasvh Dies ist eine schwierige

  • Legen Sie die maximale Breite/Höhe gemäß den Browseranforderungen für die Leinwand fest
  • Teilen und erobern Sie mit mehreren Canvas-Elementen und geben Sie ein Array zurück.
  • Geben Sie einen Fehler in der Konsole aus, der Sie zu den Canvas-Einschränkungen berät, und schlagen Sie Möglichkeiten zur Implementierung vor.

In meinem Fall klone ich den gesamten Körper und setze nur die maximale Breite/Höhe: html2canvas(el, {height: 3000, width: 3000}) .

toadkicker picture toadkicker am 10. Okt. 2018
👍9 ❤2 🎉2 👎1

@toadkicker Bruder, du speicherst heute meinen Code/Job hahahahahahahaht vielen Dank

leandrosouza0786 picture leandrosouza0786 am 26. Sept. 2019

@toadkicker Danke!

Liberateur picture Liberateur am 24. Dez. 2019

emm, ich habe das gleiche Problem, aber endlich habe ich es herausgefunden!
In meinem Fall hier meine Lösung:
füge einen iframe in dein Körperelement ein, wie

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

und jedes Element, das Sie auf die Leinwand übertragen müssen, können Sie kopieren und in diesen iframe einfügen und html2canvas verwenden und es dann wie folgt entfernen

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);

Ich habe diese Methode ausprobiert, funktioniert aber nicht genau. Auf meine Art funktioniert es mit folgendem Code:

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);
});

Und wenn Sie Ihren CSS-Stil wie im aktuellen Dokument anwenden möchten, müssen Sie auch den Stil in iframe kopieren:

// 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 picture ricosmall am 16. März 2020

Auch dies ist eine Einschränkung im Browser selbst und diese Bibliothek behandelt den Fehler nicht richtig. Keine Codierungslösung außer der Begrenzung der Anzahl der erfassten Pixel wird dies ändern.

toadkicker picture toadkicker am 16. März 2020

emm, ich habe das gleiche Problem, aber endlich habe ich es herausgefunden!
In meinem Fall hier meine Lösung:
füge einen iframe in dein Körperelement ein, wie

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

und jedes Element, das Sie auf die Leinwand übertragen müssen, können Sie kopieren und in diesen iframe einfügen und html2canvas verwenden und es dann wie folgt entfernen

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);

Ich habe diese Methode ausprobiert, funktioniert aber nicht genau. Auf meine Art funktioniert es mit folgendem Code:

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);
});

Und wenn Sie Ihren CSS-Stil wie im aktuellen Dokument anwenden möchten, müssen Sie auch den Stil in iframe kopieren:

// 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);
});

In meinem Fall sind alle Elemente im SVG- oder Inline-Stil, sodass ich kein Stylesheet anhängen muss. aber ja, Sie sollten Ihr Stylesheet bei Bedarf hinzufügen

netweng picture netweng am 30. März 2020

Ich habe das gleiche Problem gehabt. Ich musste ein Bild aus dem modalen Fenster (mit fester Position) erstellen. Ich habe immer ein weißes Bild erhalten. Das Problem lag in der Scroll-Position. Dieser Code funktioniert bei mir:

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 picture invisor am 24. Sept. 2020
🎉5 👍3 ❤1

Hat für mich wie ein Zauber funktioniert! Danke für die clevere Lösung!

flaviostutz picture flaviostutz am 30. Sept. 2020

@invisor Lebensretter! Das ist das einzige was bei mir funktioniert hat.

MEGApixel23 picture MEGApixel23 am 26. Okt. 2020

Diese Option könnte auch eine Lösung für das Scrollen verwandter Fälle sein

{
  scrollX: 0,
  scrollY: -window.scrollY
}
seahindeniz picture seahindeniz am 9. Nov. 2020
❤2 🎉1
War diese Seite hilfreich?
0 / 5 - 0 Bewertungen

Verwandte Themen

deepender87 picture deepender87  ·  4Kommentare
arzyu picture arzyu  ·  3Kommentare
AlphaDu picture AlphaDu  ·  4Kommentare
anthonymejia picture anthonymejia  ·  4Kommentare
Juliazhong picture Juliazhong  ·  4Kommentare