Solution to using html2canvas to process Dom elements with Baidu map into images

Problem 1: Baidu Map uses tiled images (the map is made up of pictures). When html2canvas is used to process images that are not in the same domain name, the browser will display a cross-domain error. It cannot be solved by using a reverse proxy because the domain name of the tile image is uncertain and proxy_pass cannot be specified.

Solution: Use Baidu Map static image processing (http://lbsyun.baidu.com/index.php?title=static). At this time, the domain name is determined (http://api.map.baidu.com), and reverse proxy can be used to solve cross-domain

<!--html-->
<el-image
:src="`/baidu-static/staticimage/v2?ak=yourak&width=1024&height=400¢er=${center.lng},${center.lat}&zoom=16`"
>
<div
  slot="placeholder"
  class="image-slot"
>
  Loading...
</div>
</el-image>

<!--nginx-->
location ^~ /baidu-static/ {
add_header 'Access-Control-Allow-Origin' "$http_origin" always;
add_header 'Access-Control-Allow-Credentials' 'true' always;
add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS' always;
add_header 'Access-Control-Allow-Headers' 'Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-
Since,Keep-Alive,Origin,User-Agent,X-Requested-With' always;
proxy_pass http://api.map.baidu.com/;
}

Question 2: How do I display the overlay on the map?

Solution: I looked at the Baidu Map static image API and found that it does not support custom overlay styles very well. It can only allow you to specify a custom image (not a local image). I tried many methods and thought that using openLayers.Map was a feasible method. However, the workload of code modification was too large, so I gave up decisively. Later, I thought of using div to simulate the overlay directly, and setting it a little higher than the static layer level would solve the problem.

Question 3: I drew a dotted circle using CSS style. After processing the generated image with html2canvas, I found that the dotted line turned into a solid line.

Solution: Use canvas to draw circles

Question 4: An icon is absolutely positioned, but the icon is not displayed in the generated image after being processed by html2canvas

Solution: Set the z-index of the icon to be greater than the Baidu static image level (PS: The style of the static image also uses absolute positioning)

Question 5: The image generated after html2canvas processing has a black background color

Solution: Change image/png to image/jpg

try {
  html2canvas(sharePage, {
    useCORS: true
  }).then((canvas) => {
    const imgBase64 = canvas.toDataURL('image/jpg')
    this.data64 = imgBase64
    })
  } catch (err) {
}

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.