应用html2canvas对有百度搜索地形图的Dom元素解决成

难题1：百度搜索地形图运用的是瓦片式照片（地形图是1张张照片拼出来的），html2canvas 解决时，遇到非同1网站域名下的照片，访问器会显示信息跨域的出错，也没法用反方向代理商来处理，由于瓦片照片的网站域名不确定性，没法特定 proxy_pass

处理：应用百度搜索地形图静态数据图解决（ http://lbsyun.baidu.com/index.php?title=static ），这时候网站域名明确了（ http://api.map.baidu.com ），能够用反方向代理商来处理跨域

<!--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"
>
  载入中<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/;
}

难题2：地形图上的遮盖物如何显示信息出来呢

处理：看了下百度搜索地形图静态数据图的 api, 不可以很好的适用遮盖物自定款式，数最多可让你特定1张自定的照片（不可以是当地照片）。正中间试过许多方法，感觉可行的是应用 openLayers.Map, 但是编码修改的工作中量太大了，坚决舍弃了。再后来想起自身用 div 立即仿真模拟好遮盖物，设定比静态数据涂层级高1点便可以处理了。

难题3：用 css 款式画了1个虚线圆，在 html2canvas 解决后的转化成的图，发现虚线变为了实线

处理：应用 canvas 来画圆

难题4：1个 icon 选用肯定精准定位，在 html2canvas 解决后的转化成的图，发现 icon 沒有显示信息

处理：给 icon 设定 z-index 超过百度搜索静态数据涂层级（PS: 静态数据图的款式也用了肯定精准定位的状况下）

难题5：在 html2canvas 解决后转化成的照片，有黑色情况色

处理： image/png 改为 image/jpg

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

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。