Solución para usar html2canvas para procesar elementos DOM con el mapa de Baidu en imágenes

Pregunta 1: Baidu Maps usa imágenes de estilo de mosaico (el mapa se detiene uno por uno). Cuando se procesa html2canvas, cuando se encuentran imágenes que no sean el mismo nombre de dominio, el navegador mostrará errores de dominio cruzado, y no se puede resolver por proxy inverso, porque el nombre de dominio de la imagen de mosaico es incierto y proxy_pass no se puede especificar

Solución: Use el procesamiento del mapa estático del mapa de Baidu (http://lbsyun.baidu.com/index.php?title=static), y el nombre de dominio se determina (http://api.map.baidu.com), y el proxy inverso se puede usar para resolver la dirección cruzada

 <!-html-> <el-Image: src = `/baidu-static/staticImage/v2? ak = suk & width = 1024 & height = 400 ¢ er = $ {center.lng}, $ {Center.lat} & zoom = 16`> <Div Slot = Place Shitchener Class class = dot> ... </span> </div> </el-image> <!-nginx-> ubicación ^~/baidu-static/{add_header 'access-confontrol-aligin' $ http_origin siempre; add_header 'access-confontrol-allow-tredentials' 'verdadero' siempre; add_header 'access-control-wethods' methods '' '' '' ', siempre; add_header 'access-confontrol-allow-headers' aceptar, autorización, caché-control, contenido, dnt, si-modificado-since, keep-alive, origen, user-agent, x-requested with 'siempre; proxy_pass http://api.map.baidu.com/;}

Pregunta 2: Cómo mostrar la superposición en el mapa

Solución: después de mirar el mapa estático API del mapa de Baidu, no puede admitir bien los estilos personalizados de superposición. A lo sumo, puede especificar una imagen personalizada (no una imagen local). Probé muchos métodos en el medio, y pensé que era factible usar OpenLayers.map, pero la carga de trabajo de los cambios en el código era demasiado grande, así que me di por vencido decisivamente. Más tarde, pensé en usar DIV para simular directamente la cubierta, y configurarlo un poco más alto que el nivel de imagen estática puede resolverlo.

Pregunta 3: Dibujé un círculo punteado en estilo CSS. La figura generada después de HTML2Canvas se procesó y descubrió que la línea punteada se convirtió en una línea continua

Solución: use lienzo para dibujar círculos

Pregunta 4: Un icono utiliza posicionamiento absoluto y gráficos generados después de que se procesan HTML2Canvas, y se encuentra que el icono no se muestra.

Solución: Establezca el índice Z para el icono para que sea mayor que el nivel de gráfico estático de Baidu (PS: cuando el estilo de gráfico estático también se usa para el posicionamiento absoluto)

Pregunta 5: La imagen generada después de HTML2Canvas se procesa con color negro de fondo

Solución: Cambie la imagen/png a imagen/jpg

 intente {html2canvas (SharePage, {useCors: true}). Entonces ((Canvas) => {const imgbase64 = Canvas.todataurl ('image/jpg') this.data64 = imgbase64})} capt (err) {}

Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.