Solution à l'utilisation de HTML2Canvas pour traiter les éléments DOM avec la carte Baidu en images

Question 1: Baidu Maps utilise des images de style carreau (la carte est épelée un par un). Lorsque Html2Canvas est traité, lors de la rencontre de photos autres que le même nom de domaine, le navigateur affichera les erreurs de domaine croisé, et il ne peut pas être résolu par proxy inverse, car le nom de domaine de l'image de carreau est incertain et proxy_pass ne peut pas être spécifié

Solution: Utilisez le traitement de la carte statique de la carte Baidu (http://lbsyun.baidu.com/index.php?title=Static), et le nom de domaine est déterminé (http://api.map.baidu.com), et le proxy inverse peut être utilisé pour résoudre le domain croisé croisé.

 <! - Html -> <el-iMage: src = `/ baidu-static / statimage / v2? ak = youraK & width = 1024 & height = 400 ¢ er = $ {Center.lng}, $ {Center.Lat} & zoom = 16`> <div slot = lisholder class = Image-SLOT> Loading Loading <pank Class = Dot> ... </span> </div> </el-image> <! - nginx -> emplacement ^ ~ / baidu-static / {add_header 'Access-Control-allow-Origin' $ http_origin toujours; add_header 'Access-Control-allow-Credentials' 'True' Always ' Toujours; add_header 'Access-Control-Allow-Headers' '' '' '' '' Autorisation, Cache-Control, Content-Type, DNT, if-modified-Since, Keep-live, Origin, User-agent, X-Aquest with 'Always; proxy_pass http://api.map.baidu.com/;}

Question 2: Comment afficher la superposition sur la carte

Solution: Après avoir regardé l'API de la carte statique de la carte Baidu, il ne peut pas bien prendre en charge les styles personnalisés de superposition. Tout au plus, vous pouvez spécifier une image personnalisée (pas une image locale). J'ai essayé de nombreuses méthodes au milieu, et j'ai pensé qu'il était possible d'utiliser OpenLayers.map, mais la charge de travail des changements de code était trop grande, alors j'ai abandonné de manière décisive. Plus tard, j'ai pensé à utiliser DIV pour simuler directement le revêtement, et le définir un peu plus que le niveau d'image statique peut le résoudre.

Question 3: J'ai dessiné un cercle pointillé dans le style CSS. La figure générée après Html2Canvas a été traitée et a constaté que la ligne pointillée devenait une ligne continue

Solution: utilisez la toile pour dessiner des cercles

Question 4: Une icône utilise un positionnement absolu et des graphiques générés après le traitement de HTML2Canvas, et on constate que l'icône n'est pas affichée.

Solution: Définissez l'index z pour que l'icône soit supérieure au niveau du graphique statique Baidu (PS: lorsque le style de graphique statique est également utilisé pour le positionnement absolu)

Question 5: L'image générée après Html2Canvas est traitée avec une couleur d'arrière-plan noir

Solution: modifiez l'image / PNG en image / jpg

 try {html2Canvas (sharepage, {usecors: true}). puis ((canvas) => {const imgbase64 = canvas.todataurl ('image / jpg') this.data64 = imgbase64})} catch (err) {}

Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.