Die Lösung von html2canvas, dass Bilder nicht normal erfasst werden können

Frage

Lassen Sie mich zunächst über das Problem sprechen, auf das ich gestoßen bin. Erstens: Es besteht eine solche Nachfrage. Das Front-End muss basierend auf den vom Back-End gesendeten Daten dynamisch Bilder generieren. Der Text, das Hintergrundbild und der Benutzeravatar im Bild werden alle über die Backend-Schnittstelle bezogen. Allerdings wurden mithilfe der von html2canvas generierten Leinwand einige Bilder erfolgreich in der Leinwand generiert. Manche Bilder können jedoch auf jeden Fall nicht angezeigt werden.

Offizielle Dokumentation

Ich habe lange erfolglos an dem Projekt gearbeitet und lange erfolglos bei Google gesucht. In diesem Moment herrschte eine leichte Verzweiflung. Plötzlich kam mir die Idee, warum nicht auf die offizielle Website gehen. Also, ich habe den folgenden Inhalt auf der offiziellen Website gesehen.

Einschränkungen<br/>
Alle Bilder, die das Skript verwendet, müssen sich am gleichen Ursprung befinden, damit es sie ohne die Hilfe eines Proxys lesen kann. Wenn Sie auf der Seite andere Canvas-Elemente haben, die mit Cross-Origin-Inhalten verunreinigt sind, werden diese ebenfalls verunreinigt und sind für html2canvas nicht mehr lesbar.<br/>
Das Skript rendert keine Plugin-Inhalte wie Flash- oder Java-Applets.

Worum geht es? Hier ist eine Übersetzung für diejenigen, die nicht gut Englisch sprechen. Wer gut Englisch kann, kann den obigen Text direkt lesen. Die allgemeine Bedeutung besteht darin, dass in html2canvas Skripte zum Bedienen verwendet werden, dh Skripte zum Konvertieren von HTML in Canvas, es gibt jedoch eine Einschränkung, nämlich, dass keine quellenübergreifenden Bilder verwendet werden können. Bei Verwendung liest html2canvas die Ressource nicht.

Aus diesem Grund sind einige Bilder auf der konvertierten Leinwand immer leer. Wenn es auf der Seite andere Canvases gibt, die ebenfalls Cross-Origin-Bildressourcen verwenden, werden diese von html2canvas nicht gelesen.

Lösung

Leiten Sie die statischen Ressourcen einfach einmal weiter und ermöglichen Sie das Laden von Cross-Origin-Ressourcen in der html2canvas-Konfiguration.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.