使用 html2canvas 对有百度地图的 Dom 元素处理成图片

问题1:百度地图应用的是瓦片式图片(地图是一张张图片拼出来的),html2canvas 处理时,遇到非同一域名下的图片,浏览器会显示跨域的报错,也无法用反向代理来解决,因为瓦片图片的域名不确定,无法指定 proxy_pass 解决:使用百度地图静态图处理(http://lbsyun.baidu.com/index...),这时域名确定了(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, 不能很好的支持覆盖物自定义样式,最多可以让你指定一张自定义的图片(不能是本地图片)。中间试过很多办法,觉得可行的是使用 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) {
}
原文链接:segmentfault.com

上一篇:grunt-verifylowercase
下一篇:karma-hashspace

相关推荐

  • 高性能JavaScript之DOM篇

    问题一:如何获取页面中所有class为div1和div2的div元素。 问题二:你了解HTMLCollection和NodeList吗?有什么区别? ...

    8 个月前
  • 高性能JavaScript DOM编程(1)

    我们知道,DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价很昂贵。有个贴切的比喻,把DOM和JavaScript(这里指ECMScript)各自想象为一个岛屿,它们之间用...

    3 年前
  • 面试官问:如何利用 random 计算 π

    前言 这是基友面试 RingCenter 时被问到的一个题目 表面上考察的是概率论等基础知识,实际可能还会问到事件循环等底层知识,以及 React Fiber 蒙特卡洛法求 π 说蒙特卡洛可能不太理...

    2 个月前
  • 附backbone.js观点存在与插入到DOM元素的EL

    Ben Roberts(https://stackoverflow.com/users/652693/benroberts)提出了一个问题:attaching backbone.js views to...

    2 年前
  • 针对前端在百度浏览器总的固定定位的问题

    再做一个广告宣传页的时候,碰到这样一个问题: 图片描述(https://img.javascriptcn.com/75e403e38123de2e6e9950ea83d62dcd "图片描述") 如...

    1 年前
  • 重学前端学习笔记(二十三)--狭义的文档对象DOM

    笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系(https://time.geekbang.org/column/i...

    1 年前
  • 那些年,那些坑--swiper loop:true引发绑定dom的click事件无效及解决方案

    对于 ,只要做过轮播图的童鞋应该都再熟悉不过了。这是一个很强大的图片轮播插件,本身无任何第三方库依赖,即插即用。api 文档很清晰,所以很快能够上手。但是,再好的插件也会出现令人不愉快的地方,当然,今...

    2 年前
  • 邂逅react(八)-虚拟DOM

    一直听说虚拟dom这个概念,虚拟dom到底是什么,下面我们一起探索,揭开这层神秘的面纱~~~react中React.createElement形成的js树就是虚拟dom 编译后 并打印结果 ...

    11 天前
  • 还记得那些年你修改过的 DOM 吗

    20190421221922.png(https://img.javascriptcn.com/aafc197ea1ae42284b938d368c458d89 "20190421221922.png...

    1 年前
  • 踩坑vue v-for操作DOM后不更新

    踩坑vue vfor操作DOM后不更新 前言 最近在看vue的风格指南时,发现了一个以前在学习,甚至开发时忽略的问题。 图片描述(https://img.javascriptcn.com/3...

    1 年前

官方社区

扫码加入 JavaScript 社区