Using html2canvas to process the DOM elements with Baidu map into pictures


Question 1:Baidu map applies tile image (the map is made up of pictures). When html2canvas processes pictures under different domain names, the browser will display cross domain error reports and cannot use reverse proxy to solve them. Because the domain name of tile image is uncertain, proxy ﹐ pass cannot be specified

Solution: use Baidu map static graph processing ( Title = static), then the domain name is determined (, you can use reverse proxy to solve cross domain problems

  Loading < span class = "dot" ></span>

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;

Question 2:How does the cover on the map show

Solution: looking at the API of Baidu map static map, it can’t support the custom pattern of the cover very well. At most, it can let you specify a custom picture (not a local picture). I’ve tried many methods in the middle, and I think it’s feasible to use, but the workload of code change is too large, so I gave up decisively. Later, I thought that I could directly simulate the cover with div, and set it a little higher than the static layer level.

Question 3:A dashed circle is drawn in CSS style. After html2canvas processing, it is found that the dashed line becomes a solid line

Solution: use canvas to draw circles

Question 4:An icon adopts absolute positioning, and the generated graph after html2canvas processing is found that the icon does not display

Solution: set Z-index for icon to be greater than Baidu static layer level (PS: when the style of static graph 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 whole content of this article. I hope it will help you in your study, and I hope you can support developepaer more.