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.