Lösung zur Verwendung von html2canvas zum Verarbeiten von Dom-Elementen mit Baidu-Map in Bilder

Lösung zur Verwendung von html2canvas zum Verarbeiten von Dom-Elementen mit Baidu-Map in Bilder

Problem 1: Baidu Map verwendet gekachelte Bilder (die Karte besteht aus Bildern). Wenn html2canvas zum Verarbeiten von Bildern verwendet wird, die nicht denselben Domänennamen haben, zeigt der Browser einen domänenübergreifenden Fehler an. Dies kann nicht durch die Verwendung eines Reverse-Proxys gelöst werden, da der Domänenname des gekachelten Bildes unsicher ist und proxy_pass nicht angegeben werden kann.

Lösung: Verwenden Sie die statische Bildverarbeitung von Baidu Map (http://lbsyun.baidu.com/index.php?title=static). Zu diesem Zeitpunkt wird der Domänenname ermittelt (http://api.map.baidu.com), und ein Reverse-Proxy kann verwendet werden, um domänenübergreifende Probleme zu lösen

<!--html-->
<el-Bild
:src="`/baidu-static/staticimage/v2?ak=yourak&width=1024&height=400¢er=${center.lng},${center.lat}&zoom=16`"
>
<div
  Slot="Platzhalter"
  Klasse="Bild-Slot"
>
  Laden...
</div>
</el-Bild>

<!--nginx-->
Standort ^~ /baidu-static/ {
add_header 'Access-Control-Allow-Origin' "$http_origin" immer;
add_header 'Access-Control-Allow-Credentials' immer 'true';
add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS' immer;
add_header 'Zugriffskontrolle-Header zulassen' 'Akzeptieren, Autorisierung, Cache-Kontrolle, Inhaltstyp, DNT, Falls geändert-
Da ,Keep-Alive,Origin,User-Agent,X-Requested-With‘ immer;
Proxy-Passwort http://api.map.baidu.com/;
}

Frage 2: Wie zeige ich das Overlay auf der Karte an?

Lösung: Ich habe mir die API für statische Bilder von Baidu Map angesehen und festgestellt, dass sie benutzerdefinierte Overlay-Stile nicht sehr gut unterstützt. Sie können nur ein benutzerdefiniertes Bild angeben (kein lokales Bild). Ich habe viele Methoden ausprobiert und dachte, dass die Verwendung von openLayers.Map eine praktikable Methode wäre. Der Arbeitsaufwand für die Codeänderung war jedoch zu groß, sodass ich entschieden aufgegeben habe. Später kam mir die Idee, das Overlay mithilfe von div direkt zu simulieren und es etwas höher als die statische Layer-Ebene einzustellen, um das Problem zu lösen.

Frage 3: Ich habe im CSS-Stil einen gepunkteten Kreis gezeichnet. Nachdem ich das generierte Bild mit html2canvas verarbeitet hatte, stellte ich fest, dass die gepunktete Linie zu einer durchgezogenen Linie wurde.

Lösung: Verwenden Sie die Leinwand, um Kreise zu zeichnen

Frage 4: Ein Symbol ist absolut positioniert, aber das Symbol wird nach der Verarbeitung durch html2canvas nicht im generierten Bild angezeigt

Lösung: Stellen Sie den Z-Index des Symbols so ein, dass er größer ist als die statische Bildebene von Baidu (PS: Der Stil des statischen Bildes verwendet auch die absolute Positionierung).

Frage 5: Das nach der html2canvas-Verarbeitung generierte Bild hat eine schwarze Hintergrundfarbe

Lösung: Ändern Sie image/png in image/jpg

versuchen {
  html2canvas(Seite teilen, {
    useCORS: wahr
  }).dann((Leinwand) => {
    const imgBase64 = canvas.toDataURL('bild/jpg')
    diese.data64 = imgBase64
    })
  } fangen (Fehler) {
}

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.

<<:  JS implementiert das Lehrplan-Stundenplan-Applet (imitiert den Super-Lehrplan) und fügt eine benutzerdefinierte Hintergrundfunktion hinzu

>>:  Beispiel für die Verwendung von CSS3 zum Erzielen eines glänzenden Schrifteffekts beim Entsperren eines Apple-Telefons

Artikel empfehlen

Zwei Möglichkeiten zum Einführen von SVG-Symbolen in Vue

So führen Sie SVG-Symbole in Vue ein Methode 1 zu...

Eine kurze Diskussion über das Implementierungsprinzip von Webpack4-Plugins

Inhaltsverzeichnis Vorwort wissen Übung macht den...

So implementieren Sie Zeilenumbrüche im Texteingabebereich von Textarea

Wenn Sie den Text im Textarea-Eingabebereich umbre...

Detailliertes Tutorial zur Installation von MySQL 8.0.20 auf CentOS7.8

1. MySQL-Software installieren Laden Sie das offi...

So bereinigen Sie schnell Milliarden von Daten in einer MySQL-Datenbank

Heute habe ich eine Festplattenalarm-Ausnahme erh...

Hilfe zum Webdesign: Datenreferenz für Web-Schriftgrößen

<br />Der Inhalt wurde aus dem Internet repr...

So implementieren Sie Property Hijacking mit JavaScript defineProperty

Inhaltsverzeichnis Vorwort Deskriptoren Detaillie...

Vue verwendet drei Methoden zum Aktualisieren der Seite

Beim Schreiben von Projekten stoßen wir häufig au...

Die Popup-Maske der Frontend-Seite verhindert das Scrollen der Seite

Ein Problem, auf das Frontend-Entwickler häufig s...

JS implementiert den Beispielcode der Dezimalkonvertierung in Hexadezimal

Vorwort Beim Schreiben von Code stoßen wir gelege...

So implementieren Sie „insert if none“ und „update if yes“ in MySql

Zusammenfassung In einigen Szenarien kann eine so...

MySQL fängt die SQL-Anweisung der String-Funktion ab

1. left(name,4) fängt die 4 Zeichen auf der linke...

Mehrere Methoden zum Löschen von Floating (empfohlen)

1. Fügen Sie ein leeres Element desselben Typs hi...

Ändern Sie die Dateiberechtigungen (Eigentum) unter Linux

Linux und Unix sind Mehrbenutzer-Betriebssysteme,...