使用html2canvas对有百度地图的Dom元素处理成图片的
建站知识 2021-07-02 22:42www.168986.cn长沙网站建设
问题1百度地图应用的是瓦片式图片(地图是一张张图片拼出来的),html2canvas 处理时,遇到非同一域名下的图片,浏览器会显示跨域的报错,也无法用反向代理来解决,因为瓦片图片的域名不确定,无法指定 proxy_pass
解决使用百度地图静态图处理( ),这时域名确定了( ),可以用反向代理来解决跨域
<!--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 'Aess-Control-Allow-Origin' "$http_origin" always; add_header 'Aess-Control-Allow-Credentials' 'true' always; add_header 'Aess-Control-Allow-Methods' 'GET, OPTIONS' always; add_header 'Aess-Control-Allow-Headers' 'Aept,Authorization,Cache-Control,Content-Type,DNT,If-Modified- Since,Keep-Alive,Origin,User-Agent,X-Requested-With' always; proxy_pass http://api.map.baidu./; }
问题2地图上的覆盖物怎么显示出来呢
解决看了下百度地图静态图的 api, 不能很好的支持覆盖物自定义样式,最多可以让你指定一张自定义的图片(不能是本地图片)。中间试过很多办法,觉得可行的是使用 openLayers.Map, 可是代码改动的工作量太大了,果断放弃了。再后来想到自己用 div 直接模拟好覆盖物,设置比静态图层级高一点就可以解决了。
问题3用 css 样式画了一个虚线圆,在 html2canvas 处理后的生成的图,发现虚线变成了实线
解决使用 canvas 来画圆
问题4一个 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) { }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
长沙网站设计
- 如何进行东阳SEO关键词优化?
- 边坝哪有关键词排名优化:提升你的网站流量与
- 安国百度优化服务:提升您的在线可见性
- 阜康新手做SEO怎么做
- 山西seo网站排名关键词优化:提升您网站曝光率
- 临沂seo网站排名关键词优化:提高你的网站可见
- 广西SEO网站推广怎样付费比较合理
- 双辽SEO网站推广:提升你的网站可见性与流量
- 辽宁企业网站优化购买方式有哪些
- 提升宝清百度SEO排名的实用技巧与策略
- 静宁百度SEO排名:提升您网站曝光率的关键策略
- 彭州百度SEO排名的提升策略和实施指南
- 广南百度关键词SEO:提升网站排名的关键策略
- 辽宁关键词优化怎么做论坛营销
- 吉林百度seo排名如何做到让用户满意
- 内黄百度优化服务:提升在线可见性的关键