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

Question 1: Baidu Maps uses tile-style pictures (the map is spelled out one by one). When html2canvas is processed, when encountering pictures other than the same domain name, the browser will display cross-domain errors, and it cannot be solved by reverse proxy, because the domain name of the tile image is uncertain and proxy_pass cannot be specified

Solution: Use Baidu Map static map processing (http://lbsyun.baidu.com/index.php?title=static), and the domain name is determined (http://api.map.baidu.com), and the 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 <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 to display the overlay on the map

Solution: After looking at the API of Baidu Map Static Map, it cannot support overlay custom styles well. At most, you can specify a custom picture (not a local picture). I tried many methods in the middle, and I thought it was feasible to use openLayers.Map, but the workload of code changes was too great, so I gave up decisively. Later I thought of using div to directly simulate the covering, and setting it a little higher than the static image level can solve it.

Question 3: I drew a dotted circle in css style. The generated figure after html2canvas was processed and found that the dotted line became a solid line

Solution: Use canvas to draw circles

Question 4: An icon uses absolute positioning and generated graphs after html2canvas are processed, and it is found that the icon is not displayed.

Solution: Set the z-index for icon to be greater than the Baidu static graph level (PS: When the static graph style is also used for absolute positioning)

Question 5: The image generated after html2canvas is processed with 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 all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.