<p>html2canvas rendert keine Bilder, die sich im Element befinden</p>

Hallo.
Ich habe genau das gleiche Problem.

Dasselbe Problem hier.
Ich versuche, die Aufnahme eines Tweets zu machen, und das angehängte Bild kommt nicht durch.
Bild anbei.

Ich glaube, Bilder von anderen Websites werden standardmäßig blockiert, weil sie "die HTML5-Leinwand verschmutzen". Hier ist die Option, die Sie verwenden müssen, wenn Sie den Renderer aufrufen:

Attribut: allowTaint
Typ: boolesch
Standard: falsch
Beschreibung: Ob ursprungsübergreifende Bilder die Leinwand verschmutzen dürfen

Hier gefunden: https://html2canvas.hertzen.com/documentation.html.

gleiches Problem....
und meine Bilder stammen vom gleichen Ursprung

Ich hatte das gleiche Problem, der beste Weg, das Problem zu lösen, besteht darin, das Projekt auf dem Server auszuführen und das Ergebnis zu sehen.
In meinem Fall habe ich früher die HTML-Dateien direkt ohne Server ausgeführt, aber nachdem ich ein bisschen gegoogelt hatte, bekam ich eine Lösung, um es auf einem Server zu versuchen.
Ich habe mein Projekt mit Visual Studio ausprobiert und es lief perfekt, meine Bilder im div-Tag wurden ebenfalls kopiert

Fügen Sie die Option allowTaint ein, um alle Bilder in Ihrem Screenshot anzuzeigen

html2canvas(document.getElementById('invoice-panel'), { letterRendering: 1, allowTaint : true, onrendered : function (canvas) { } });

Ich habe eine Liste von div-Elementen in.
Wenn ich versuche, jedes Div nach ID zu erfassen, wird ein Teil der Div-Halbportion erfasst und ein Teil des Erfassungsbilds des Div ist leer.
könnt ihr mir sagen was das problem ist und wie ich es beheben kann. @

Das gleiche Problem. Danke für die Lösung.

html2canvas konvertiert keine Bilder, die src im base64-Format erhalten haben. Ich habe das Protokoll ausgedruckt. Freundlich helfen

1283ms html2canvas: Dokument geklont html2canvas.js:1487
3936ms html2canvas: CanvasRenderer mit Größe 601 x 965 html2canvas.js:1487 initialisiert
3937ms html2canvas: Starten von NodeParser html2canvas.js:1487
4014 ms html2canvas: Abgerufene Knoten, insgesamt: 10 html2canvas.js:1487
4015ms html2canvas: Überlaufclips berechnen html2canvas.js:1487
4034ms html2canvas: Starten Sie das Abrufen von Bildern html2canvas.js:1487
4044ms html2canvas: Bild #1 data:image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pL html2canvas.js:1487 hinzugefügt
4047ms html2canvas: Bild #2 data:image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aH html2canvas.js:1487 hinzugefügt
4051ms html2canvas: Suche nach Bildern html2canvas.js:1487 beendet
4052 ms html2canvas: Bild Nr. 1 erfolgreich geladen
ImageContainer {src: " data:image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD…AKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigD/2Q==", Bild: img, Tainted: null, Promise: h}
html2canvas.js:1487
4056ms html2canvas: Bild Nr. 2 erfolgreich geladen
ImageContainer {src: " data:image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD…4PXOaUMB0/GlrcdiYtkcc/WkzjqfwqMPxzxRvAz3oSCx//9k=", Bild: img, Tainted: null, Promise: h}
html2canvas.js:1487
4059ms html2canvas: Bilder geladen, Parsing von html2canvas.js:1487 wird gestartet
4060 ms html2canvas: Erstellen von Stapelkontexten html2canvas.js:1487
4064 ms html2canvas: Sortieren von Stapelkontexten html2canvas.js:1487
4066 ms html2canvas: Render-Warteschlange mit 9 Elementen html2canvas.js:1487 erstellt
4104ms html2canvas: Rendering von html2canvas.js:1487 abgeschlossen
4109ms html2canvas: Arbeitsfläche beschneiden bei: links: 28 oben: 529 Breite: 545 Höhe: 0 html2canvas.js:1487
4111ms html2canvas: Resultierender Zuschnitt mit Breite 545 und Höhe 0 mit x 28 und y 529

html2canvsas rendert keine Bilder, die mit base64 src angegeben wurden, Aufruf kommt nicht zurück zu "onrendered"
Funktion. Freundlich helfen

1283ms html2canvas: Dokument geklont html2canvas.js:1487
3936ms html2canvas: CanvasRenderer mit Größe 601 x 965 html2canvas.js:1487 initialisiert
3937ms html2canvas: Starten von NodeParser html2canvas.js:1487
4014 ms html2canvas: Abgerufene Knoten, insgesamt: 10 html2canvas.js:1487
4015ms html2canvas: Überlaufclips berechnen html2canvas.js:1487
4034ms html2canvas: Starten Sie das Abrufen von Bildern html2canvas.js:1487
4044ms html2canvas: Bild #1 data:image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pL html2canvas.js:1487 hinzugefügt
4047ms html2canvas: Bild #2 data:image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aH html2canvas.js:1487 hinzugefügt
4051ms html2canvas: Suche nach Bildern html2canvas.js:1487 beendet
4052 ms html2canvas: Bild Nr. 1 erfolgreich geladen
ImageContainer {src: " data:image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD…AKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigD/2Q==", Bild: img, Tainted: null, Promise: h}
html2canvas.js:1487
4056ms html2canvas: Bild Nr. 2 erfolgreich geladen
ImageContainer {src: " data:image/jpeg;base64 ,/9j/4AAQSkZJRgABAQAAAQABAAD…4PXOaUMB0/GlrcdiYtkcc/WkzjqfwqMPxzxRvAz3oSCx//9k=", Bild: img, Tainted: null, Promise: h}
html2canvas.js:1487
4059ms html2canvas: Bilder geladen, Parsing von html2canvas.js:1487 wird gestartet
4060 ms html2canvas: Erstellen von Stapelkontexten html2canvas.js:1487
4064 ms html2canvas: Sortieren von Stapelkontexten html2canvas.js:1487
4066 ms html2canvas: Render-Warteschlange mit 9 Elementen html2canvas.js:1487 erstellt
4104ms html2canvas: Rendering von html2canvas.js:1487 abgeschlossen
4109ms html2canvas: Arbeitsfläche beschneiden bei: links: 28 oben: 529 Breite: 545 Höhe: 0 html2canvas.js:1487
4111ms html2canvas: Resultierender Zuschnitt mit Breite 545 und Höhe 0 mit x 28 und y 529

@SebasAlvarez - die AllowTaint- Option funktioniert nicht mehr. Funktioniert es bei dir noch?

@SebasAlvarez , @sandeepnagra :
Ich verwende diesen Code für Bild-Screenshots in einem neuen Tab, aber das Bild wird nicht gerendert, und ich habe auch keine Lust mehr auf "a llowTaint:true ". Es funktioniert nur im selben Fenster, aber nicht im neuen Tab.
das ist mein Code:
Funktion rendern(){
html2canvas(document.body, { allowTaint : true,
onrendered: function(canvas) {
document.body.appendChild (Leinwand);
window.open (canvas.toDataURL());
}
});
}
kannst du mir sagen was das problem ist, wie kann man das beheben??

@venkateshduddu - verlagerst du den Fokus zuerst auf einen neuen Tab, bevor du einen Screenshot machst?

@sandeepnagra - kein Sandeep, ich verwende nur das Klickereignis. Noch ein Screenshot, der funktioniert, wenn ich den lokalen Bildpfad verwende, aber der Serverpfad in der neuen Registerkarte nicht funktioniert.

@venkateshduddu - ein Klickereignis verschiebt den Fokus nicht automatisch auf einen neuen Tab, das müssen Sie auslösen. Also versuchen Sie das zuerst, ich bin 100% sicher, dass es Ihr Problem lösen wird.

Ist das Netzlaufwerk in Bezug auf den Serverpfad authentifiziert? Wenn ja, authentifizieren Sie sich, bevor Sie Dateien auf das Netzlaufwerk hochladen? Es ist eine ganz andere Geschichte, wenn Sie sie in den S3-Bucket hochladen möchten.

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

Wenn ich allowTaint verwendet habe, funktionierte die Download-Option nicht. Bitte helfen Sie

gleiches Problem....
und meine Bilder stammen vom gleichen Ursprung

Ich habe dieses Problem gerade behoben.
Bitte aktivieren Sie die Option 'useCORS' auf 'true'
Codes unten:
html2canvas( document.querySelector(".preview_area"), { logging: true, letterRendering: 1, // allowTaint: false useCORS: true } ).then(canvas => { })

Vielen Dank @Sotyoyo , Mein Fehler wurde mit dem obigen Code behoben. Danke Danke

@Sotyoyo Vielen Dank, Bruder, Gott segne dich <3

@Sotyoyo Vielen Dank, es funktioniert für mich :)

Das Bild wird nicht gerendert. Gibt es ein Problem in meinem Code?

html2canvas(document.getElementById("html-2-pdfwrapper"), {
Protokollierung: wahr,
LetterRendering: 1,
allowTaint: falsch,
useCORS: wahr,
onrendered: function(canvas) {
var img = canvas.toDataURL('image/png');
var doc = new jsPDF();
doc.addImage(img, 'JPEG', 20, 20);
doc.save('test2.pdf');
}
});

gleiches Problem....
und meine Bilder stammen vom gleichen Ursprung

Ich habe dieses Problem gerade behoben.
Bitte aktivieren Sie die Option 'useCORS' auf 'true'
Codes unten:
html2canvas( document.querySelector(".preview_area"), { logging: true, letterRendering: 1, // allowTaint: false useCORS: true } ).then(canvas => { })

es ist Arbeit! Vielen Dank!

gleiches Problem....
und meine Bilder stammen vom gleichen Ursprung

Ich habe dieses Problem gerade behoben.
Bitte aktivieren Sie die Option 'useCORS' auf 'true'
Codes unten:
html2canvas( document.querySelector(".preview_area"), { logging: true, letterRendering: 1, // allowTaint: false useCORS: true } ).then(canvas => { })

das ist richtig /

html2canvas(document.querySelector("#id-of-element"),{ Protokollierung: true, letterRendering: 1, allowTaint: false, useCORS: true }).then(canvas => {
var imgData = canvas.toDataURL('image/jpeg');
});

Fügen Sie die Option allowTaint ein, um alle Bilder in Ihrem Screenshot anzuzeigen

html2canvas(document.getElementById('invoice-panel'), { letterRendering: 1, allowTaint : true, onrendered : function (canvas) { } });

Danke. Es funktioniert gut.

Aber ich kann den Bildstil nicht auf die Leinwand klonen

Ich habe immer noch das gleiche Problem, auch nachdem ich die obigen Optionen unten verwendet habe, ist mein Code.
var element = document.querySelector("#map-image-id");
html2canvas(element, {
Protokollierung: wahr,
LetterRendering: 1,
allowTaint: falsch,
useCORS: wahr
}).then(canvasElm => {
var imageType = "image/png";
var imageData = canvasElm.toDataURL(imageType);
var src = encodeURI (Bilddaten);
console.log("src", src);
console.log("Bilddaten", Bilddaten);

Ich habe immer noch das gleiche Problem, auch nachdem ich die obigen Optionen unten verwendet habe, ist mein Code.
var element = document.querySelector("#map-image-id");
html2canvas(element, {
Protokollierung: wahr,
LetterRendering: 1,
allowTaint: falsch,
useCORS: wahr
}).then(canvasElm => {
var imageType = "image/png";
var imageData = canvasElm.toDataURL(imageType);
var src = encodeURI (Bilddaten);
console.log("src", src);
console.log("Bilddaten", Bilddaten);

dir auch. Hast du es gelöst?

Ich habe immer noch das gleiche Problem, auch nachdem ich die obigen Optionen unten verwendet habe, ist mein Code.
var element = document.querySelector("#map-image-id");
html2canvas(element, {
Protokollierung: wahr,
LetterRendering: 1,
allowTaint: falsch,
useCORS: wahr
}).then(canvasElm => {
var imageType = "image/png";
var imageData = canvasElm.toDataURL(imageType);
var src = encodeURI (Bilddaten);
console.log("src", src);
console.log("Bilddaten", Bilddaten);

gleiches Problem bei mir jede Hilfe

Ich sehe das gleiche Problem. Was mache ich falsch?

html2canvas(document.getElementById(<id>), {
    logging: true,
    letterRendering: 1,
    allowTaint: false,
    useCORS: true
}).then(result => {
    var img = result.toDataURL("image/png");
    savePng(img);
});

Das Folgende funktioniert auch, wenn Sie <img src-"..." /> einschließen möchten:

html2canvas(report, {letterRendering: 1, allowTaint: true, useCORS: true})
            .then((canvas) => {      
                const imgData = canvas.toDataURL('image/png');
               // const pdf = new jsPDF();
               // pdf.addImage(imgData, 'PNG', 10, 10);
                //pdf.save("foo.pdf");  
            });

Mein Inhalt enthält Bilder, die von Aws.s3() stammen. Die oben genannten Kommentare funktionieren in meinem Fall nicht.

html2canvas(content, {letterRendering: 1,allowTaint: false,useCORS:true })
.then(Leinwand => {
const imgData = canvas.toDataURL('image/png');
console.log (imgData);
const pdf = new jsPDF();
pdf.addImage(imgData, 'PNG', 10, 10, canvas.width, canvas.height);
pdf.save('herunterladen.pdf');
});

Die Ausgabeleinwand enthält nur ein leeres Feld anstelle eines Bildes. Hat jemand eine Lösung für meinen Fall?

Mein Inhalt enthält Bilder, die von Aws.s3() stammen. Die oben genannten Kommentare funktionieren in meinem Fall nicht.

html2canvas(content, {letterRendering: 1,allowTaint: false,useCORS:true })
.then(Leinwand => {
const imgData = canvas.toDataURL('image/png');
console.log (imgData);
const pdf = new jsPDF();
pdf.addImage(imgData, 'PNG', 10, 10, canvas.width, canvas.height);
pdf.save('herunterladen.pdf');
});

Die Ausgabeleinwand enthält nur ein leeres Feld anstelle eines Bildes. Hat jemand eine Lösung für meinen Fall?

gleiches Problem hier. Bilder aus dem S3-Bucket

gleiches Problem....
und meine Bilder stammen vom gleichen Ursprung

Ich habe dieses Problem gerade behoben.
Bitte aktivieren Sie die Option 'useCORS' auf 'true'
Codes unten:
html2canvas( document.querySelector(".preview_area"), { logging: true, letterRendering: 1, // allowTaint: false useCORS: true } ).then(canvas => { })

Danke
Bei mir funktioniert es ❤❤

Der Zugriff auf das Bild unter „ https://image/logo link“ vom Ursprung „ http://localhost :3000“ wurde durch die CORS-Richtlinie blockiert: Für die angeforderte Ressource ist kein Header „Access-Control-Allow-Origin“ vorhanden.
Ist das der Grund, warum mein Logo nicht in der PDF-Datei erscheint?
Stellen Sie den gesamten Text mit angewendetem CSS wieder her und das Markenlogo, das sich in meinem statischen Ordner befindet, kommt.
Bitte antworten Sie, ich brauche Hilfe dazu. Ich versuche das seit mehr als 2 Wochen.

Für alle, die hierher kommen, habe ich nach vielen Versuchen herausgefunden, dass Sie zum Abrufen von Bildern aus externen Ressourcen (z. B. S3-Bucket) sowohl useCORS = true für html2canvas als auch die CORS-Richtlinie für die von S3 bereitgestellten Bilder aktivieren müssen.

Ich habe es mit dem html2canvas-Proxy gelöst. Hier finden Sie einige Details zur Verwendung und zum Testen:
https://github.com/zeusstl/html2canvas-proxy-nodejs