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

Time:2020-1-13

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 (http://lbsyun.baidu.com/index.php? Title = static), then the domain name is determined (http://api.map.baidu.com), you can use reverse proxy to solve cross domain problems

<!--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 < span class = "dot" ></span>
</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 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 openlayers.map, 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.

Recommended Today

What are the new methods of visual + map technology?

Last week, Ren Xiaofeng, chief scientist of Alibaba Gaode map, made a technical exchange with you on the development of computer vision related technology and the application in the field of map travel at the online live broadcast activity of “cloud dialogue” between senior students of Alibaba. The interaction between live broadcast is hot. Especially […]