Html2canvas: Domainübergreifende Bilder werden nicht gerendert (kein CORS oder Proxy)

Vielleicht sollten Sie useCORS ptoperty als true verwenden, es ist für domänenübergreifende Webinhalte gedacht

Bei Verwendung von useCORS schlägt die Bildaufnahme fehl. Das Problem, das ich habe, ist seltsam, da es nicht fehlschlägt, das Bild von der externen Domäne abzurufen, es wird einfach nicht in der Aufnahme gerendert.

Hast du meine Lösung probiert? https://github.com/niklasvh/html2canvas/pull/554

Wahrscheinlich sollte allowTaint auf true gesetzt werden, aber dann können Sie das gerenderte Ergebnis nicht exportieren.

Ich verstehe nicht, warum man nicht die userCORS oder proxy ... Sie wurden nur für solche Probleme entwickelt.

@brcontainer Da sie in der neuesten Version nicht funktionieren, sehen Sie sich meinen Fix an: https://github.com/niklasvh/html2canvas/pull/554

@Cristy94 Klar!! Tolle Lösung! Vielen Dank!

Hallo @Cristy94 ,

Ich rufe die Bilder von CMS (Contentful) in meinem HTML-Code ab und versuche dann, ein PDF dieses HTML-Codes zu generieren.
Aber im generierten PDF fehlen Bilder. (scheint ein Problem mit Kreuzursprung zu sein).
Bitte schlagen Sie mir vor, wie ich diese Probleme loswerden kann.
Unten ist mein Code-:

Funktion downloadPDF() {
var canvasToImage = function(canvas){
var img = neues Image();
var dataURL = canvas.toDataURL('image/png');
img.crossOrigin = "Anonym";
img.src = dataURL;
zurück img;
};

var canvasShiftImage = function(oldCanvas,shiftAmt){
shiftAmt = parseInt(shiftAmt) || 0;
if(!shiftAmt){ return oldCanvas; }

var newCanvas = document.createElement('canvas');
newCanvas.height = oldCanvas.height - shiftAmt;
newCanvas.width = oldCanvas.width;
var ctx = newCanvas.getContext('2d');
ctx.mozImageSmoothingEnabled = false;
ctx.webkitImageSmoothingEnabled = false;
ctx.msImageSmoothingEnabled = false;
ctx.imageSmoothingEnabled = false;

var img = canvasToImage(oldCanvas);
ctx.drawImage(img,0, shiftAmt, img.width, img.height, 0, 0, img.width, img.height);

return newCanvas;
};

var canvasToImageSuccess = function(canvas){
var pdf = new jsPDF('l','px'),
pdfInternals = pdf.internal,
pdfPageSize = pdfInternals.pageSize,
pdfScaleFactor = pdfInternals.scaleFactor,
pdfPageWidth = pdfPageSize.width,
pdfPageHeight = pdfPageSize.height,
totalPdfHeight = 0,
htmlPageHeight = canvas.height,
htmlScaleFactor = canvas.width / (pdfPageWidth * pdfScaleFactor),
Sicherheitsnetz = 0;

while(totalPdfHeight < htmlPageHeight && safetyNet < 15){
var newCanvas = canvasShiftImage(canvas, totalPdfHeight);
pdf.addImage(newCanvas, 'png', 0, 0, pdfPageWidth, 0, null, 'NONE');
// var alias = Math.random().toString(35);
// pdf.addImage(newCanvas, 0, 0, pdfPageWidth, 0, 'png', alias, 'NONE');

totalPdfHeight += (pdfPageHeight * pdfScaleFactor * htmlScaleFactor);

if(totalPdfHeight < htmlPageHeight){
pdf.addPage();
}
SicherheitsNet++;
}

var Seitenname = document.location.pathname.match(/[^/]+$/)[0];
pdf.save(Seitenname + '.pdf');
};

html2canvas($('body')[0],
{
aufgerendert: Funktion (Leinwand) {
canvasToImageSuccess (Leinwand);
}
});
}

Hey, wird es dafür eine Lösung geben? CORS-Bilder werden hier auch nicht gerendert :(

Hallo Rookev,

Sie können dies tun, indem Sie eine der Optionen in der html2canvas-Funktion übergeben. Und glaubt mir, das wird sicher funktionieren :)

html2canvas($('#div_pdf')[0],
{
useCORS: true, //Durch Übergabe dieser Option an die Funktion Cross-Origin-Bilder werden in der heruntergeladenen PDF-Version korrekt gerendert
aufgerendert: Funktion (Leinwand) {
canvasToImageSuccess (Leinwand);
}
});
Für weitere Informationen können Sie sich die Dokumentation der html2canvas-Bibliothek unter folgender URL ansehen:
https://html2canvas.hertzen.com/documentation.html

Hallo @gauravmishra24 , das funktioniert leider nicht. Das Problem ist, dass ich Bilder von einem Server einfügen möchte, auf dem der Server das Flag hat

Access-Control-Allow-Origin: *

nicht eingestellt

:(

Hallo Rookev,

Könntest du bitte deinen Codeschnipsel posten?

Damit ich mir das gleich besser anschauen kann.....

Hi,

Gibt es dafür eine Lösung? Auch wenn useCORS auf true gesetzt ist, werden keine Bilder heruntergeladen. Erhalten Sie immer noch den oben genannten Cross-Origin-Fehler.

Außerdem bin ich mir bei der Lösung von Cristy94 in der verteilten Datei html2Canvas.js nicht sicher. Auch nach dem Ändern des Codes in einer verteilten Datei funktioniert es gemäß https://github.com/niklasvh/html2canvas/pull/554/commits/87d44359be73075ba4d5f36d6e1c8b88b7444402 auch nicht.

Gibt es für die andere Alternative mit Proxy-Einstellungen eine Lösung für die Anwendung von Winkel 2?
Die Liste der aktuellen Website (https://github.com/niklasvh/html2canvas/wiki/Proxies) enthält sie nicht!

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

@niklasvh Hier ist mein Beispiel für Codepen mit v1.0.0:
https://codepen.io/Onlylonger/pen/ppjPKX
die gleiche frage. Dank dir

Gibt es ein anderes Plugin, das jemand kennt. Dies funktionierte nicht mit verschiedenen Serveranfragen. Kein richtiges Beispiel für Proxy angegeben.

@vinayistar Sie können meine Änderungen ausprobieren, siehe Link https://github.com/niklasvh/html2canvas/issues/1544#issuecomment -435640901

Verwenden von useCORS und Setzen des img-Attributs crossOrigin:anonymous

{ useCORS: false, allowTaint: true } das hat bei mir funktioniert

Meine Lösung für dieses Problem ist das Konvertieren des Image src in Base64

const img = document.querySelector('#img')
fetch(img.src)
  .then(res => res.blob())
  .then(blob => new Promise((resolve, reject) => {
      const reader = new FileReader;
      reader.onerror = reject;
      reader.onload = () => {
        resolve(reader.result);
      };
      reader.readAsDataURL(blob);
    })
  )
  .then(dataURL => {
    img.src = dataURL
    return html2canvas(element)
  } )

@todoi Können Sie das Beispiel dafür mit jspdf bereitstellen.

@nishanta454
Dies ist das Beispiel, das ich geschrieben habe. html2canvas rendert ursprungsübergreifende Bilder .
In diesem Beispiel verwende ich cors-anywhere , um CORS-Header zur Proxy-Image-Anfrage hinzuzufügen.

Das erste, was wir brauchen, ist ein Server, der so konfiguriert ist, dass er Bilder hostet, wobei der Header Access-Control-Allow-Origin so konfiguriert ist, dass er den ursprungsübergreifenden Zugriff auf Bilddateien zulässt.
von CORS_enabled_image