Lösung für die Verwendung von HTML2CANVAs, um DOM -Elemente mit Baidu -Karte in Bilder zu verarbeiten

FRAGE 1: Baidu Maps verwendet Bilder im Fliesenstil (die Karte wird nacheinander geschrieben). Wenn HTML2CANVAS verarbeitet wird und andere Bilder als denselben Domänennamen begegnen, zeigt der Browser Cross-Domain-Fehler an und kann nicht durch Reverse-Proxy gelöst werden

Lösung: Verwenden Sie Baidu Map statische Kartenverarbeitung (http://lbyun.baidu.com/index.php?title=static), und der Domänenname wird bestimmt (http://api.map.baidu.com), und der umgekehrte Proxy kann verwendet werden, um Cross-Domain zu lösen

 <!-html-> <el-Image: src = `/baidu-static/staticImage/v2? ak = yourak & width = 1024 & height = 400 ¢ er = $ {center.lng}, $ {central.lat} & zoom = 16`> <div SOT = Placeholder Class class = dot> ... </span> </div> </el-Image> <!-nginx-> location ^~/baidu-static/{add_header 'Access-Control-Allow-origin' $ http_origin immer; add_header 'access-control-allowententials' true 'wahr; Immer; add_header 'Access-Control-Allow-Header' '' Akzeptieren, Autorisierung, Cache-Kontroll, Inhaltstyp, DNT, If-Modified-Since, Keep-Alive, Origin, User-Agent, X-Requesting-With 'Immer;

Frage 2: So zeigen Sie das Overlay auf der Karte an

Lösung: Nachdem Sie sich die API der statischen Karte der Baidu -Karte angesehen haben, kann sie keine Überlagerungs -benutzerdefinierten Stile gut unterstützen. Sie können höchstens ein benutzerdefiniertes Bild angeben (kein lokales Bild). Ich habe viele Methoden in der Mitte ausprobiert und dachte, es sei machbar, OpenLayers.Map zu verwenden, aber die Arbeitsbelastung von Codeänderungen war zu groß, also gab ich entschlossen auf. Später dachte ich daran, Div zu verwenden, um die Abdeckung direkt zu simulieren und sie etwas höher zu setzen, als die statische Bildebene sie lösen kann.

Frage 3: Ich habe einen gepunkteten Kreis im CSS -Stil gezogen. Die erzeugte Abbildung nach HTML2CANVAS wurde verarbeitet und stellte fest, dass die gepunktete Linie zu einer durchgezogenen Linie wurde

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

Frage 4: Ein Symbol verwendet absolute Positionierung und generierte Diagramme, nachdem HTML2CANVAs verarbeitet wurden, und es wird festgestellt, dass das Symbol nicht angezeigt wird.

Lösung: Stellen Sie den Z-Index für das Icon so ein, dass es größer ist als die statische Graphenpegel von Baidu (PS: Wenn der statische Graphenstil auch für die absolute Positionierung verwendet wird)

Frage 5: Das nach dem HTML2canvas erzeugte Bild wird mit schwarzer Hintergrundfarbe verarbeitet

Lösung: Bild/PNG in Bild/JPG ändern

 Versuchen Sie {html2canvas (SharePage, {usecors: true}). Dann ((canvas) => {const imgbase64 = canvas.todataurl ('Image/jpg') that.data64 = imgbase64})} catch (err) {} {}} {}

Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.