应用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) {
}

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