Html2canvas: Image-Tag erfasst nicht

Ihnen fehlt das Vorladen von Bildern, das selbst asynchron ist, also müssen Sie es in Rückrufe einschließen. Sie verwenden wahrscheinlich auch eine ältere Version, daher würde ich empfehlen, die neueste Version von https://github.com/niklasvh/html2canvas/downloads zu beziehen und dann zu testen mit:

html2canvas( $('table'), {
   onrendered: function( canvas ) {
        var img = canvas.toDataURL();
        $('#calendar_to_canvas').attr('src', img);
   }
});

Vielen Dank für die schnelle Antwort, ich habe die neueste Version heruntergeladen und den obigen Code ausprobiert. Der Bild-Tag wird immer noch nicht in der gerenderten Leinwand angezeigt. Vermisse ich etwas, habe ich html2canvas.js, jquery.plugin.html2canvas hinzugefügt und jquery 1.7 verwendet. Ihre Hilfe wird gerne in Anspruch genommen.

Werden die Bilder unter demselben Ursprung gehostet wie die Seite, die Sie rendern?

Legen Sie logging: true und überprüfen Sie, was die Konsole zu den Bildern sagt, schlagen sie fehl?

Bilder werden perfekt geladen, siehe Protokolle unten:

html2canvas: Preload startet: Hintergrundbilder finden html2canvas.js:27
html2canvas: start: Bilder: 1 / 1 (fehlgeschlagen: 0) html2canvas.js:27
html2canvas: start: images: 2 / 2 (fehlgeschlagen: 0) html2canvas.js:27
html2canvas: start: images: 3 / 3 (fehlgeschlagen: 0) html2canvas.js:27
html2canvas: start: images: 4 / 4 (fehlgeschlagen: 0) html2canvas.js:27
html2canvas: start: Bilder: 5 / 5 (fehlgeschlagen: 0) html2canvas.js:27
html2canvas: start: Bilder: 6 / 6 (fehlgeschlagen: 0) html2canvas.js:27
html2canvas: start: Bilder: 7 / 7 (fehlgeschlagen: 0) html2canvas.js:27
html2canvas: Preload: Bilder suchen html2canvas.js:27
html2canvas: Vorladen: Fertig. html2canvas.js:27
html2canvas: start: images: 8 / 18 (fehlgeschlagen: 0) html2canvas.js:27
html2canvas: start: images: 9 / 18 (fehlgeschlagen: 0) html2canvas.js:27
html2canvas: start: Bilder: 10 / 18 (fehlgeschlagen: 0) html2canvas.js:27
html2canvas: start: images: 11 / 18 (fehlgeschlagen: 0) html2canvas.js:27
html2canvas: start: Bilder: 12 / 18 (fehlgeschlagen: 0) html2canvas.js:27
html2canvas: start: Bilder: 13 / 18 (fehlgeschlagen: 0) html2canvas.js:27
html2canvas: start: Bilder: 14 / 18 (fehlgeschlagen: 0) html2canvas.js:27
html2canvas: start: Bilder: 15 / 18 (fehlgeschlagen: 0) html2canvas.js:27
html2canvas: start: Bilder: 16 / 18 (fehlgeschlagen: 0) html2canvas.js:27
html2canvas: start: Bilder: 17 / 18 (fehlgeschlagen: 0) html2canvas.js:27
html2canvas: start: images: 18 / 18 (fehlgeschlagen: 0) html2canvas.js:27
Bilder geladen: # 18 (fehlgeschlagen: 0) html2canvas.js:27

Bilddaten können nicht vom Canvas abgerufen werden, da der Canvas durch ursprungsübergreifende Daten verunreinigt wurde.

html2canvas: Renderer: Canvas-Renderer fertig - Rückgabe des Canvas-Objekts

Die Javascript-Datei und das Bild befinden sich zusätzlich zum vorherigen Kommentar im selben Verzeichnis.

Hallo niklasvh, es funktionierte perfekt mit dem gleichen ursprünglichen Richtlinienproblem. Ich habe die Ausführung in Websever behoben, das zuvor lokal mit file:// ausgeführt wurde. Dies wird als domänenübergreifendes Problem angesehen. Danke, dass du mich in die richtige Richtung geführt hast. Das ist ein tolles Plugin :)

Niklashvh Ich versuche, dies für die Android-Hybrid-App zu tun, die lokal mit file:// ausgeführt wird.

Wenn Sie das Bild nirgendwo exportieren müssen, können Sie jederzeit allowTaint: true festlegen

Wir exportieren das Bild in den Speicher und senden es als PDF per E-Mail

Ich habe das gleiche Problem, das Log lautet wie folgt:

html2canvas: Preload startet: html2canvas.js Hintergrundbilder finden: 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
Laden der Bilder abgeschlossen: # 2 (fehlgeschlagen: 0) html2canvas.js: 21
html2canvas: Renderer: Canvas-Renderer fertig - Rückgabe von obj canvas

die bilder befinden sich im hintergrundbild, lade einfach das hauptbild div, häftlinge werden nicht angezeigt.

Kein Problem, da sich die Bilder in derselben Domäne befinden.

Irgendeine Idee?

wenn ich "background-size: cover;" hinzufüge. zum Stil wird das Bild nicht angezeigt ...

anscheinend ist das das problem

und es hat funktioniert!!, nur ich muss "background-size: 100% 100%;" statt "background-size: cover;"

HTML@Canvas wird nicht erfasst, wenn Online-URLs mit img verwendet werden. Was ist die Lösung für dieses Problem?
Danke

@Elgamal10 Proxy verwenden

https://github.com/brcontainer/html2canvas-php-proxy (html2canvas-Proxy mit PHP)
https://github.com/brcontainer/html2canvas-asp-vbscript-proxy (html2canvas-Proxy mit asp-classic - vb)
https://github.com/brcontainer/html2canvas-csharp-proxy (html2canvas-Proxy mit asp.net - csharp)

Hinweis: Datei README.md lesen

Vielen Dank für Ihre Antwort, es ist gut, Screenshots zu machen, aber es gibt Fehler wie:

html2canvas_5 ist nicht definiert
html2canvas_0 ist nicht definiert
html2canvas_5 ist nicht definiert
html2canvas_4 ist nicht definiert
html2canvas_1 ist nicht definiert
html2canvas_5 ist nicht definiert

@Elgamal10 ein Problem im Projekt erstellen
https://github.com/brcontainer/html2canvas-csharp-proxy/issues?state=open

Ich glaube, Sie verwenden C# (ASP.NET), habe ich recht?

Hallo Niklas,

Ich habe angefangen, Ihre API zu verwenden und es ist großartig.. Aber ich stecke fest, können Sie bitte helfen..

Ich versuche, einen HTML-Code mit dem folgenden Code in Canvas zu konvertieren:
jQuery('html').html2canvas({
proxy:" http://localhost/myproject/proxy.jsp ",
userCORS:wahr ,
aufgerendert: Funktion (Leinwand) {
Warnung (Leinwand);
var url = canvas.toDataURL("image/png");
window.open(url, '_blank');
},
});

Jetzt habe ich eine Datei namens proxy.jsp, die alle Cross-Origin-Images im Pfad ~/tomcat/myproject/images/ speichert.

Danach sehe ich das in der Konsole
Ressource als Skript interpretiert, aber mit MIME-Typ image/jpeg übertragen: " http://localhost/myproject/proxy.jsp?url=http%3A%2F%2Fi.ebayi …QYEAAMXQVERSuVtL%2F%24_1.JPG%3Fset_id%3D8800004005&callback= html2canvas_64". html2canvas.js:2264

Nach all dem wird meine Callback-Funktion nicht ausgeführt und ich kann keine Leinwand erstellen.

Was kann getan werden? Können Sie bitte helfen?

Danke vielmals

@himakshi89 Sie können proxy: und userCORS: gleichzeitig verwenden.

Verwenden Sie lieber einen Proxy.
Hinweis: Versuchen Sie, den Körper einzufangen.

in Ihrem Code hat ein Komma übrig:

},//this is wrong.

});

Welche Version Ihres html2canvas?

Versuche dies:

jQuery('body').html2canvas({
    "onrendered": function(canvas) {
    }
});

Wenn dies nicht funktioniert, versuchen Sie, die html2canvas https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js herunterzuladen und verwenden Sie diesen Code:

html2canvas($("body").get(0), {
    "logging": true,
    "proxy": "http://localhost/myproject/proxy.jsp",
    "onrendered": function(canvas) {
        alert(canvas);
        var url = canvas.toDataURL("image/png");
        window.open(url, "_blank");
    }
});

@brcontainer
Hi

Ich habe meinen Code geändert und sende jetzt die Antwort von proxy.jsp als
({"html2canvas_67":http://localhost/myproject/0.1651487380333363.jpg"})

In der Konsole werden jetzt keine Fehler angezeigt.
Aber jetzt passiert nichts.. Was sollte passieren oder gibt es einen Ort, der geändert werden muss?

Bitte helft

Aber da die Konsole nichts anzeigen kann
hast du meinen zweiten Beispielcode verwendet? es sendet Protokolle an die Konsole.

Versuchen Sie, Ihren Code online zum Testen bereitzustellen.

Wie vorgeschlagen habe ich useCORS entfernt und html durch body ersetzt

jQuery('body').html2canvas({
Proxy:" http://nisquare.dyndns.org :8087/facebook/proxy.jsp",
Protokollierung: wahr ,
aufgerendert: Funktion (Leinwand) {
var url = canvas.toDataURL("image/png");
window.open(url, '_blank');
}
});

Ich erhalte auch das ist meine Konsole
html2canvas: Fehler beim Laden : http://cmsip.tradus.ibcdn.com/MOBMKXE29ULYUMKH_4902586_320x360.jpg html2canvas.js:21

Ich habe einen Screenshot von dem, was ich bekomme, angehängt

Sie haben versucht, https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js herunterzuladen

und dieser Code:

html2canvas($("body").get(0), {
    "logging": true,
    "proxy": "http://localhost/myproject/proxy.jsp",
    "onrendered": function(canvas) {
        alert(canvas);
        var url = canvas.toDataURL("image/png");
        window.open(url, "_blank");
    }
});

oder nicht?

HINWEIS: http://nisquare.dyndns.org:8087/facebook/proxy.jsp ist kaputt!

Ich hatte die neueste Version heruntergeladen

Ich ersetze den Code durch Folgendes

html2canvas($("body").get(0), {
Proxy:" http://nisquare.dyndns.org :8087/facebook/proxy.jsp",
Protokollierung: wahr ,
aufgerendert: Funktion (Leinwand) {
var url = canvas.toDataURL("image/png");
window.open(url, '_blank');
}
});

schick mir den Linktest

Ich verwende diese Chrome-Erweiterung und die Erweiterung befindet sich noch im Entwicklungsmodus

"Chrome-Erweiterung" mit JSP ?

das jsp wird nur für den Proxy-Teil verwendet. Was ist deiner Meinung nach besser?

Chrome-Erweiterung läuft in anderen "Protokoll" und "Frame", proxy.jsp verwendet das HTTP-Protokoll.

Ich glaube, Chrome-Erweiterungen benötigen keinen Proxy. Verwenden Sie wie:

html2canvas($("body").get(0), {
    "logging": true,
    "onrendered": function(canvas) {
        alert(canvas);
        var url = canvas.toDataURL("image/png");
        window.open(url, "_blank");
    }
});

LESEN: http://developer.chrome.com/extensions/tut_debugging.html

@brcontainer
Hey, danke für die Idee.. wir verwenden jetzt eine von Chrome selbst bereitgestellte API. Es hat eine Funktion chrome capturevisibletab, die das Problem sehr einfach löst :)

@jgab-net vielen Dank. Habe viel zu lange nach dem Fehler gesucht

@ Sumit8 (Y) gern

@gitbala Ist Ihr Problem gelöst? @niklasvh Kann dieses Problem geschlossen werden? (Ich werde mit der Fehlersuche aufhören, wenn das nervig ist.. :)

@usmonster auf jeden Fall weiter, spart mir etwas Zeit, um jedes einzelne offene Problem durchzusehen :)

Ja ist gelöst :)

Am Montag, den 1. September 2014 um 4:11 Uhr schrieb usmonster [email protected] :

@gitbala https://github.com/gitbala Ist Ihr Problem behoben? @niklasvh
https://github.com/niklasvh Kann dieses Problem geschlossen werden? (Ich höre auf mit
Die Fehlersuche ist das nervig.. :)

—
Antworten Sie direkt auf diese E-Mail oder zeigen Sie sie auf GitHub an
https://github.com/niklasvh/html2canvas/issues/145#issuecomment -54047596
.

Ich verwende das html2canvas - lokales Bild, das nicht im PDF-Format wiedergegeben wird. was ist die lösung dafür?

@niklasvh pls help - das Logobild in html wird nicht in pdf gerendert

Ich bin beim Konvertieren von Inline-Image fehlgeschlagen. Wie man "proxy" verwendet: " http://localhost/myproject/proxy.jsp ", ich benutze vue, wo ich dieses jsp ablegen soll und ich weiß nicht, wie man ? Hilfe?

@qiuyaofan mit dem gleichen Problem hast du die Lösung bekommen? Ich verwende es mit angle2 und erhalte Bilder von einem anderen Server. @gitbala hast du die Lösung?

+1 Übrigens, die Protokolle sehen gut aus ( html2canvas: Images loaded, starting parsing ), aber ich sehe die Bilder im PDF immer noch nicht.

Ich benutze

allowTaint: wahr,
useCORS: wahr,
taintTest: falsch,

@NikhilRadadiya @qiuyaofan Leute, haben auch nach einer

html2canvas(element, {
        "logging": true, //Enable log (use Web Console for get Errors and Warings)
        useCORS: true,
        taintTest: false,
        onrendered: function(canvas) {
          var img = new Image();
          img.onload = function() {
            document.body.appendChild(img);
          };
          img.error = function() {
            if(window.console.log) {
              window.console.log("Not loaded image from canvas.toDataURL");
            } else {
              alert("Not loaded image from canvas.toDataURL");
            }
          };
          img.src = canvas.toDataURL("image/png");
        }
      });

Es wurde also kein Proxy verwendet.

@creepteed Ich habe andere Elemente, die ich in Canvas konvertieren und dann als PDF speichern muss. Mein HTML enthält nicht nur Bilder. Wenn dies der Fall ist, wie kann ich dann die obige Funktion verwenden, die Sie gepostet haben?

Hallo @niklasvh ,
Ich möchte eine Webseite mit htmltocanvas erfassen, alles funktioniert gut, aber wenn ich versuche, eine Webseite zu erfassen, bekomme ich keine Bilder.
Kannst du mir helfen?
Hier ist mein Code:
function capture(div_id=null) { jQuery(".screenshot_row_target").html2canvas({ logging: true, //taintTest : true, //proxy: "https://skeleton-21.myshopify.com", onrendered: function (canvas) { jQuery('#screenshot_img_val').val(canvas.toDataURL("image/png")); //document.getElementById("screenshot_html_form").submit(); } }); }

In der Konsole bekomme ich das
html2canvas: Preload starts: finding background-images html2canvas.js:19 html2canvas: Preload: Finding images html2canvas.js:19 html2canvas: Preload: Done. html2canvas.js:19 html2canvas: start: images: 0 / 0 (failed: 0) html2canvas.js:19 Finished loading images: # 0 (failed: 0) html2canvas.js:19 html2canvas: Error loading <img>://cdn.shopify.com/s/files/1/2186/4293/files/user2_300x300.png?v=1503661428 html2canvas.js:19 html2canvas: Error loading background: html2canvas.js:19 html2canvas: Error loading <img>://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_300x300.gif html2canvas.js:19 html2canvas: Renderer: Canvas renderer done - returning canvas obj
Vielen Dank.