Html2canvas: Probleme mit Hintergrundbildern

Scheint mit 0.4.1 behoben zu sein (im Entwicklungszweig). Vermutlich verwandt mit #256

Könnten Sie es mit 0.4.1 versuchen und sehen, ob das Problem weiterhin besteht?

Hallo. Ich habe genau das gleiche Problem. Ja, das Problem besteht noch in 0.4.1. Danke für die ganze Hilfe.

Ich habe das gleiche Problem ... Irgendeine Lösung schon? Danke Niklas für dieses tolle Skript.

Dieser Code wird nicht gerendert.
div class="mc-image" title="" style="background- image:url ('http://eterni-t.design.s3.amazonaws.com/381/theme-154-original-1.jpg' ); Breite: 1025 Pixel; Höhe: 780 Pixel; Z-Index: 9999"

Mir ist aufgefallen, dass wenn ich background-size entferne: cover; von meiner Klasse = "mc-image" funktioniert es.

@ymorin007 Sind Sie auf Mac und Chrome/Opera/Safari und/oder verwenden Sie den neuesten Commit (dh das Skript selbst erstellt)?

Windows7 Chrome-Version 30.0.1599.101 m

Temp-Fix:

Zeile 2818 ändern in

ctx.fillStyle = (options.background !== undefined) ? options.background : parsedData.backgroundColor;

Es hängt definitiv mit zwei Optionen der Hintergrundgröße zusammen: enthalten oder abdecken.

Der neueste Commit (html2canvas 0.4.1) hat es für mich behoben

Meiner macht das auch nach dem letzten Commit immer noch...

Meine Hintergrundgröße ist auf 'cover' eingestellt und ich habe auch 'auto 100%' ausprobiert und es ist immer noch nur weiß / transparent.

Wenn ich die Hintergrundgröße entferne, fängt es ganz gut ein ... weitere Tipps?

Temporäre Korrektur, verwenden Sie:

background:url ("...base64...")

und nicht verwenden

Verwenden Sie auch keine "Sprites", da html2canvas das nicht zu verstehen scheint.

Ich habe ein Problem mit Hintergrundbildern, wenn die URL einen relativen Pfad zum oberen Verzeichnishintergrund enthält: url(../i/alerts-16x.png")

Es funktioniert, wenn png auf folgende Weise im Hintergrund verschoben wird: url("i/alerts-16x.png")

Ich konnte keine Hintergrundbilder rendern und es schien eine Abdeckung zu sein oder eine Hintergrundgröße zu enthalten, daher habe ich Zeile 350 in Version 0.4.1 geändert in:

topPos = isNaN(parseInt(bgposition[1], 10)) ? topPos : parseInt(bgposition[1], 10);

und es funktioniert!

Ich bin auf Version 0.4.1

Ich habe auch ein Problem mit dem Hintergrund.

Ich habe live 350 geändert, wie von fperich vorgeschlagen, aber es hat nicht geholfen.

Auch probiert das von Hernan empfohlene base64 Hintergrundbild ebenfalls keine Freude.

Die URL, die ich konvertieren möchte, ist diese
http://prompter.rareapps.org/prompt/prompt-save3.php?p=123

Es konvertiert mit Hintergrund, wenn ich den Webseiten-Renderer hier verwende
http://html2canvas.hertzen.com/screenshots.html

Aber auf meiner eigenen Seite hat es keinen Hintergrund. Siehe Muster hier
http://prompter.rareapps.org/prompt/prompt-save3.php?p=123

Der Code den ich verwende ist dieser

<script type="text/javascript">
$(window).load(function() {
    html2canvas(document.body, {
        onrendered: function(canvas) {
        window.location.href = canvas.toDataURL('image/jpeg');
    },
    allowTaint: true,
    taintTest: false
    });
});
</script>

Im Grunde lässt es die Seite laden und sich selbst in ein Bild konvertieren.

Stimmt was nicht mit meinem Code?

Vielen Dank

fperich du rock man !! Danke

Ich unterstütze das, fperich, du bist gerade mein Lieblingsmensch!

Danke fperich :D hat gut geklappt

@shauchenka @niklasvh Würden Sie sagen, dass dieses Problem behoben ist? Kann/sollte dieses Thema geschlossen werden?

Unter Verwendung von 0.4.1 (sowohl Release als auch Entwickler neueste) wird das Hintergrundbild meiner untergeordneten Elemente (die Kinder sind Sprites) nicht auf der Leinwand angezeigt, zumindest in Chrome für Windows. Firefox für Windows funktioniert jedoch einwandfrei. Auf Chrome für Mac erhalte ich ein schwarzes Quadrat, wo die Spanne mit dem Hintergrundbild ist. Ich habe fperich Fix versucht, aber es hat bei mir nicht funktioniert. Das Hintergrundbild hat denselben Ursprung, alle Dateien befinden sich im selben Verzeichnis auf dem Server.

@4gstudios Können Sie ein vereinfachtes Beispiel in eine jsfiddle (oder in einen öffentlich zugänglichen Link) einfügen, um das Problem zu demonstrieren?

@usmonster sicher. Ich habe jsfiddle nicht verwendet, weil ich nicht wollte, dass die Bilder extern sind, damit wir ursprungsübergreifende Probleme ausschließen können.

jetzt rate mal was. Während ich dies vorbereitete, wurde mir klar, dass das Problem mit dem PNG zu liegen scheint, das ich für meine Sprites verwenden möchte. Zuerst dachte ich vielleicht an die Dateigröße, aber es scheint tatsächlich ein Problem mit den Abmessungen des PNG zu sein.

es könnte etwas mit der Menge der im PNG enthaltenen Informationen zu tun haben, da komplexere PNG das Problem bei relativ kleineren Abmessungen aufweisen. Ich glaube nicht, dass es unbedingt mit der Dateigröße zu tun hat, da ich ein bisschen mit der PNG-Optimierung über tinypng.com herumgespielt habe und ein größer dimensioniertes Bild mit einer kleineren Dateigröße das Problem haben wird, während ein kleiner dimensioniertes Bild mit einer größeren Datei das Problem hat Größe wird nicht.

Schauen Sie sich mein Beispiel an:

die blaue Box wird gut gerendert (bg-Bild ist 100x7800 Pixel / 374kb)
die rote Box wird nicht richtig gerendert (bg-Bild ist 100x25000 Pixel / 254kb)
-in OS X Chrome (Blackbox)
-OS X Safari ("kein" Feld)
-und wahrscheinlich Win Chrome (war gestern passiert, aber nicht in der Nähe eines PC-Geldautomaten)
-OS X Firefox scheint gut zu funktionieren.

Hoffentlich habe ich das Problem gut dargestellt und wir können es lösen. Das Sprite, das ich in meinem Projekt verwenden möchte, hat über 800 verschiedene CSS-Regeln und ich möchte es WIRKLICH nicht ändern müssen!

Bearbeiten: Mein Beispiel verwendet 0.4.1, aber ich habe das gleiche Problem, als ich 0.5.0rc1 ausprobiert habe

Ich habe kein OS X zum Testen zur Verfügung, aber es scheint unter Chrome 37 unter Windows (Vista) und Chrome 38 Beta unter Linux (Debian Wheezy) gut zu funktionieren. Welche Chrome-Version verwenden Sie? Haben Sie versucht, im Inkognito-Modus / mit deaktivierten Erweiterungen zu testen?

@usmonster Habe gerade Chrome 36 (Win7) ausprobiert und dann auf Chrome 37 (Win7) aktualisiert, wobei das Problem immer noch

@4gstudios Wenn Sie die Protokollierung

Aktualisieren Sie außerdem das Beispiel auf Ihrer Website, um nur das zu verwenden, was sich derzeit im Master-Zweig befindet, auch wenn das gleiche Problem auftritt. Es wird sehr beim Debuggen helfen.

Drittens überprüfen Sie bitte auch, ob dieses Problem auch dann auftritt, wenn alle Chrome-Erweiterungen deaktiviert sind. (Wenn ja, frage ich mich, ob es ein Timing-Problem ist, da der Download und/oder das Rendern des Bildes möglicherweise zu langsam sind?)

@usmonster

1) Protokollierung ist aktiviert....
html2canvas: Preload startet: Hintergrundbilder finden html2canvas.js:21
html2canvas: Preload: Bilder finden html2canvas.js:21
html2canvas: Vorladen: Fertig. html2canvas.js:21
html2canvas: start: images: 1 / 2 (fehlgeschlagen: 0) html2canvas.js:21
html2canvas: start: images: 2 / 2 (fehlgeschlagen: 0) html2canvas.js:21
Bilder geladen: # 2 (fehlgeschlagen: 0) html2canvas.js:21
html2canvas: Renderer: Canvas-Renderer fertig - Rückgabe von Canvas obj html2canvas.js:21

2) Aktualisiert auf den Master-Zweig html2canvas.js

3) Ja, ich habe es mit allen deaktiviert versucht. Wenn es am Timing liegt, denke ich nicht, dass es an der Downloadzeit liegt, aber das Rendern ist durchaus möglich.

@4gstudios Haben Sie eine andere Maschine zum Testen? Außerdem sieht der Live-Link immer noch so aus, als würde er 0.4.1 verwenden.

@usmonster oh ok mein schlecht, ich habe das behoben. habe es gerade auch auf einem WinServer2012-Rechner, Chrome 37, getestet, das gleiche Problem mit dem Blackbox-Rendering anstelle von bg

Hm, ich kann das Problem immer noch auf keinem meiner verfügbaren Computer reproduzieren, aber ein Kollege könnte auf seinem Windows 7-Computer. @niklasvh , @brcontainer irgendwelche ideen? Ich denke, es hat etwas mit plattformspezifischem GPU-beschleunigtem Compositing / Rasterisierung zu tun. Ich werde versuchen, dies später in dieser Woche zu testen, wenn ich Zugriff auf meinen W7-Computer bekomme, aber ich bin neugierig ... @4gstudios , was passiert, wenn du dein zweites Bild halbierst und erneut testest? Und weiter halbieren (und die CSS-Regel anpassen), bis der Fehler vielleicht verschwindet? Ich möchte sehen, ob es eine "interessante" Region des PNG gibt, die dieses Problem auslöst.

@usmonster Ist auf meinem Windows 7 x64 mit Chrome aufgetreten. Ich werde versuchen, einen DEBUG zu machen.
Es gibt einige Probleme, die in Windows7x64 auftreten, aber nicht in Version 32. Ich glaube, es ist ein Fehler von Chrome.

Ich bin mir ziemlich sicher, dass dies mit der Größe des Originalbildes zusammenhängt. Es gibt viele unterschiedliche Ergebnisse beim Rendern großer Bilder oder großer Leinwände, und meines Wissens gibt es keine wirklich intelligenten Möglichkeiten, die Unterstützung dafür zu erkennen.

Obwohl sie nicht direkt mit der Größe des Quellbildes zusammenhängen, geben Ihnen die unterschiedlichen Ergebnisse eine Vorstellung von Problemen mit großen Bildern und Leinwänden:

• http://stackoverflow.com/questions/6081483/maximum-size-of-a-canvas-element
• http://social.msdn.microsoft.com/Forums/windowsapps/en-US/53c368e5-042b-4c3f-8903-ee024f4f7933/canvas-max-size?forum=winappswithhtml5
• https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html#//apple_ref/doc/uid/TP40006482 -SW15

Wahrscheinlich sollten Sie einige Tests sowohl für die maximale Bildgröße als auch für die Leinwandgröße für verschiedene Browser/Betriebssysteme/Speichergrenzen durchführen, um ein besseres Verständnis zu erhalten, wo die Grenzen liegen und ob sie irgendwie umgangen werden können, indem Sie beispielsweise das Rendering in kleinere Blöcke aufteilen .

@4gstudios @brcontainer Wie viel Speicher haben Ihre Geräte, auf denen Sie das Problem replizieren konnten?

@niklasvh

• Windows 7 Home Premium x64
• Intel Core i5 CPU M450 2,40 GHz
• 4 GB Arbeitsspeicher

Ich werde auf Windows 32bit testen (so möglich), aber ich glaube das Problem tritt nur unter Windows64bit auf

wie ich vermutet habe, tritt das Problem nur in "Windows x64" auf, sowie https://github.com/niklasvh/html2canvas/issues/206#issuecomment -17744888, also in Windows 32bit funktionieren, in Windows 64bit fehlgeschlagen , ein wahrscheinlicher Fehler Chrome.

@brcontainer das Problem tritt bei mir auch in Chrome und Safari unter OS X 10.7 auf...

Ich habe auch auf meinem 32-Bit-Windows 7-Rechner getestet und alles funktioniert gut (kein Fehler). Dies sieht definitiv nach einem reinen 64-Bit-Systemproblem aus - netter Haken, @brcontainer! Zu beachten ist auch, dass vor kurzem eine neue Version von Chrome speziell für 64-Bit-Systeme veröffentlicht wurde:

http://blog.chromium.org/2014/08/64-bits-of-awesome-64-bit-windows_26.html
https://www.google.com/chrome/browser/?platform=win64 (Windows-Download-Link)
http://blog.chromium.org/2014/08/mac-chrome-when-im-sixty-four-bits.html (Mac befindet sich noch in der Beta-Phase)

Für diejenigen, die auf dieses Problem gestoßen sind: Sind Sie sicher, dass Sie nicht noch die 32-Bit-Version ausführen? Ich denke, Sie müssen die 64-Bit-Version manuell herunterladen, um sie zu erhalten. Es besteht die Möglichkeit, dass diese Probleme gelöst werden.

@usmonster Nun, mein Windows7 ist 64bit. Der Fehler betrifft sowohl 32-Bit- als auch 64-Bit-Chrome unter Win7 64-Bit. Ich denke, es betrifft auch einige OSX-Rechner. Danke für den Link, um die 64-Bit-Version von Chrome zu erhalten, obwohl es mein Problem nicht löst :cry:

das klingt nach einem Fehler in Chrome und nicht nach einer Inkompatibilität mit "Windows 64bit" (oder Mac OSX)

@brcontainer Ich stimme zu, dass es wie ein Problem mit @4gstudios es war Können Sie den Fehler unter 32-Bit-Windows sehen? Und wie viel RAM hatten Sie auf Ihren von dem Problem betroffenen Computern?

Wäre schön, wenn ich dieses Problem auf die Wurzel reduzieren könnte. Das zweite PNG hat Farbverläufe und viel größere Abmessungen als das erste PNG. Wenn ich eine betroffene Maschine zum Testen hätte, würde ich das "schlechte" PNG wegschneiden, bis ich feststellen könnte, ob es eine bestimmte Problemregion oder -größe gibt, die dies verursacht. (Möglicherweise auch für @niklasvh interessant: http://wkbug.com/52391)

@usmonster @niklasvh

Im AppleWebkit (Version 538.1) und "Safari 5.1.7" (Version 534.57.2 - dieser Browser bekommt keine Updates mehr) für Windows .then nicht ausführen (kein Feuer/Trigger).

Ich konnte also nicht testen, ob es sich um einen Ausfall von "Webkit" oder einen Ausfall von "Blink" (Engine Fork von Webkit in Chrome) oder gar einen Ausfall mangels "RAM" handelt.

@brcontainer Ich denke, man kann davon ausgehen, dass der Fehler laut @4gstudios sowohl in Safari als auch in Chrome unter OS X reproduzierbar war und auftritt .

@usmonster Ich konnte die Windows nicht darauf testen, dass .then(...) in AppleWebkit (Version 538.1) nicht läuft

@usmonster Ich habe beim Erstellen meines Beispiels irgendwie das Ausschneiden gemacht, aber nicht auf superwissenschaftliche Weise. Ich werde versuchen, es besser zu dokumentieren, wenn ich etwas Zeit habe, aber das wird wahrscheinlich nicht für eine Woche oder so sein.

@usmonster , @brcontainer , @niklasvh , vielen Dank für eure Hilfe bei dem Problem

@niklasvh onrendered ist veraltet. Was kann ich also stattdessen verwenden? Ich verwende 0.5.0-alpha1.

Auch das Hintergrundbild wird nicht heruntergeladen, obwohl sich die Bilder in derselben Domäne befinden.

html2canvas($("#foredownload table"), {
Protokollierung: wahr,
aufgerendert: Funktion(c) {
var myImage = c.toDataURL("images/jpeg");
$('#downloadableImage').prop('href', myImage);
}
});
Jede Hilfe wird geschätzt. Vielen Dank

@codegiant2 https://github.com/niklasvh/html2canvas#usage .

Danke fperich bei mir hat es geklappt!!

@fperich
du hilfst mir sehr!Vielen Dank!

Ich war das Gesicht eines beschnittenen Körperhintergrundbildes
(klein bounds.height von NodeContainer.prototype.parseBackgroundSize - html2canvas 0.5.0-beta3 ) mein

body {
    background-image: url(./res/bg.jpeg);
    background-repeat:no-repeat;
    background-position:center center;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
}

GELÖST Hinzufügen

html, body {
   margin: 0;
   padding: 0;
   height: 100%;
}

Danke an niklasvh und alle Mitwirkenden für dieses schöne Stück Code!

Ich habe auch das gleiche Problem, ich lade von s3-Bild, das nicht im Canvas angezeigt wird, aber ich lade lokal in meinem System funktioniert gut, wie kann ich das lösen?

ich habe auch das gleiche Problem.

Hintergrundbild konnte nicht geladen werden. Ich erhalte eine Fehlermeldung Fehler beim Laden des Hintergrunds:

jsGeige hier

Bitte helfen Sie mir, dieses Problem zu beheben.
Vielen Dank,

Hallo @gopiss ,

Korsische Option verwenden.

html2canvas(document.body, {
            onrendered: function (canvas) {
.....
            },
            useCORS: true
        });

@fxmontigny.
Immer noch die Lade Ausgabe border-Bild vorhanden sind . Siehe mein aktualisiertes JSFiddle .
Rahmenbild wird nicht geladen, es zeigt nur einen schwarzen Farbrahmen.

Ich stehe vor dem gleichen Problem. Unten sind Protokolle von der Chrome-Konsole
html2canvas: Preload startet: Hintergrundbilder finden
html2canvas.js:21 html2canvas: start: Bilder: 1 / 1 (fehlgeschlagen: 0)
html2canvas.js:21 html2canvas: start: Bilder: 2 / 2 (fehlgeschlagen: 0)
html2canvas.js:21 html2canvas: Preload: Bilder suchen
html2canvas.js:21 html2canvas: Vorladen: Fertig.
html2canvas.js:21 html2canvas: start: Bilder: 2 / 2 (fehlgeschlagen: 0)
html2canvas.js:21 Laden der Bilder abgeschlossen: # 2 (fehlgeschlagen: 0)
html2canvas.js:21 html2canvas: Fehler beim Laden des Hintergrunds:
html2canvas.js:21 html2canvas: Renderer: Canvas-Renderer fertig - Rückgabe des Canvas-Objekts

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

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 benötigten Antworten haben oder finden, damit wir weitere Nachforschungen anstellen können.

Nur kommentieren, da dies vielleicht jemandem helfen kann.
Mein Problem war, dass lokal alles funktionierte, aber in der Produktion konnten CSS-Hintergrundbilder nicht gerendert werden.
Der Grund war, dass wir CloudFront verwendeten – was bedeutet, dass die URLs in der CSS-Datei auf Assets in der Cloudfront-Domäne verwiesen, während das JS in einer separaten Domäne ausgeführt wurde.
Das html2canvas-Protokoll zeigte jedoch nicht an, dass es sich um ein Cors-Problem handelt.
'useCORS' scheint nicht alleine zu funktionieren, da ich denke, dass es eine Proxy-URL oder so erfordert.

@jacobclarke für mich auch das gleiche Problem bei der Verwendung von html2canvas zum Erfassen der Hintergrundbilder auf der Leinwand in lokalen S3-Bildern werden erfasst Aber in der Produktion werden die Hintergrundbilder nicht erfasst. meine html2canvas-Version ist v1.0.0