Die Lösung von html2canvas für das Problem, dass Bilder nicht normal abgefangen werden können

Lassen Sie uns zunächst darüber sprechen, auf welche Probleme wir gestoßen sind. Erstens besteht ein solcher Bedarf. Das Front-End muss Bilder basierend auf den vom Back-End übergebenen Daten dynamisch generieren. Die Texte, Hintergrundbilder und Benutzeravatare in den Bildern werden alle über die Back-End-Schnittstelle abgerufen. Einige mit html2canvas generierte Bilder im Canvas wurden jedoch erfolgreich im Canvas generiert. Aber einige Bilder werden trotzdem nicht angezeigt.

Ich habe lange Zeit an dem Projekt gearbeitet, ohne Ergebnisse, und ich habe lange Zeit bei Google gesucht, ohne Ergebnisse. Zu dieser Zeit herrschte eine gewisse Verzweiflung. Plötzlich kam mir der Gedanke, warum ich nicht mal auf der offiziellen Website vorbeischaue. Also habe ich den folgenden Inhalt auf der offiziellen Website gesehen.

Einschränkungen<br/>

Alle Bilder, die das Skript verwendet, müssen sich unter demselben Ursprung befinden, damit es sie ohne die Hilfe eines Proxys lesen kann. Gleiches gilt, wenn Sie andere Canvas-Elemente auf der Seite haben, die mit ursprungsübergreifenden Inhalten verunreinigt wurden , werden sie verschmutzt 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 Studierende, die nicht gut Englisch können. Wenn Sie gut Englisch können, können Sie das Obige direkt lesen. Die allgemeine Bedeutung besteht darin, dass in html2canvas Skripte für den Betrieb verwendet werden, das heißt, Skripte werden zum Konvertieren von HTML in Canvas verwendet. Es gibt jedoch eine Einschränkung, nämlich dass quellenübergreifende Bilder nicht verwendet werden können. Bei Verwendung liest html2canvas die Ressource nicht.

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

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

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.