Solução para usar o HTML2Canvas para processar elementos DOM com mapa Baidu em imagens

Pergunta 1: O Baidu Maps usa imagens em estilo de ladrilhos (o mapa é soletrado um por um). Quando html2Canvas é processado, ao encontrar outras imagens além do mesmo nome de domínio, o navegador exibirá erros de domínio cruzado e não pode ser resolvido por proxy reverso, porque o nome de domínio da imagem é incerto e proxy_pass não pode ser especificado

Solução: Use o processamento do mapa estático do mapa do Baidu (http://lbsyun.baidu.com/index.php?title=static), e o nome do domínio é determinado (http://api.map.baidu.com), e o proxy reverso pode ser usado para resolver cross-domain

 <!-html-> <el-image: src = `/Baidu-static/staticImage/v2? Ak = yeak & width = 1024 & Height = 400 ¢ er = $ {Center.lng}, $ {Center.lat} & zoom = 16`> <div slot = placelerl Classl = span = span = span = span = span = span = span = sPanel = class = dot> ... </span> </div> </el-image> <!-nginx-> location ^~/baidu-static/{add_header 'access-control-allow-origin' $ http_origin sempre; add_header 'access-control-clow-control-cen-credentials' '' sempre; sempre; sempre; add_header 'Access-Control-arlow-headers' 'aceita, autorização, controle de cache, tipo de conteúdo, dnt, se modificado-uma vez, mantendo-se, origem, agente de usuário, x-request-with' sempre; proxy_pass http:/pi.map.baidu.com/;};

Pergunta 2: Como exibir a sobreposição no mapa

Solução: Depois de olhar para a API do mapa estático do Baidu, ela não pode suportar bem a sobreposição de estilos personalizados. No máximo, você pode especificar uma imagem personalizada (não uma imagem local). Eu tentei muitos métodos no meio e achei que era viável usar o OpenLayers.map, mas a carga de trabalho das mudanças de código era muito grande, então desisti decisivamente. Mais tarde, pensei em usar o DIV para simular diretamente a cobertura e configurá -la um pouco mais do que o nível de imagem estática pode resolvê -lo.

Pergunta 3: Eu desenhei um círculo pontilhado no estilo CSS. A figura gerada após Html2Canvas foi processada e descobriu que a linha pontilhada se tornou uma linha sólida

Solução: use tela para desenhar círculos

Pergunta 4: Um ícone usa o posicionamento absoluto e os gráficos gerados após o html2Canvas são processados ​​e verifica -se que o ícone não é exibido.

Solução: Defina o índice Z para o ícone ser maior que o nível do gráfico estático do Baidu (PS: quando o estilo de gráfico estático também é usado para posicionamento absoluto)

Pergunta 5: A imagem gerada após HTML2Canvas é processada com cor de fundo preta

Solução: Altere a imagem/png para imagem/jpg

 tente {html2Canvas (sharePage, {usecors: true}). Então ((canvas) => {const imgBase64 = canvas.todataurl ('image/jpg') this.data64 = imgbase64})} catch (err) {}

O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.