酷站(www.ku0.com)-致力于为互联网从业者提供动力!

热门关键词:  企业  as  baidu  c4rp3nt3r  美女
【阿里云】采购季上云仅¥223/3年

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

来源:互联网搜集 作者:秩名 人气: 发布时间:2019-10-14
本篇文章主要介绍了解决使用html2canvas对有百度地图的Dom元素处理成图片,对大家的学习或者工作具有一定的参考学习价值,感兴趣的小伙伴们可以参考一下,也感谢大家对酷站(ku0.com)的支持。

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

版权声明:本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 959677720#qq.cn(#换@) 举报,一经查实,本站将立刻删除。
原文链接:

相关文章

  • HTML页面插入SVG的几种方法介绍

    HTML页面插入SVG的几种方法介绍

    SVG (Scalable Vector Graphics) 可缩放矢量图,是一种基于XML语法的图像格式。其他图像格式都是基于像素处理的,SVG则是属于对图像的形状描述,所以它本质上是文本文件,体积相对较小,且放大时也不会失真。 插入svg标签 直接使用 svg ......
    04-22
  • html网页添加音乐视频的实现

    html网页添加音乐视频的实现

    1.video标签 支持firefox自动播放 谷歌、ie不支持自动播放 video controls=controls autoplay=autoplay name=mediasource src=./img/music.mp3 type=audio/mpeg/video 谷歌可以通过添加 muted 通过静音来实现自动播放 video controls=con......
    04-20
  • 实现HTML在透明输入框里添加图标的方法

    实现HTML在透明输入框里添加图标的方法

    最近在写一个律师推荐前台的网站,在上面搜索框这里出现了问题,我想把搜索的图标放在搜索框里面,但是弄了半天都不大如意 话不多说,我们直接进入主题 : 基本思路 其实就把输入框与后面的图标一起放在一个div里面,然后将输入框的borde......
    03-28
  • html实现简单ListViews效果

    html实现简单ListViews效果

    html实现简单ListViews效果 实现效果: css样式文件listviewTest.css body{ background: whitesmoke;}#mainContentDiv{ position: absolute; width : 70%; height :100%; background: whitesmoke; top: 10%; left: 10%;}.mainDivMainImgD......
    03-11
  • html中marquee标签实现无缝滚动跑马灯效果方法

    html中marquee标签实现无缝滚动跑马灯效果方法

    marquee标签,它是成对出现的标签,首标签marquee和尾标签/marquee之间的内容就是滚动内容。marquee标签的属性主要有behavior、bgcolor、direction、width、height、hspace、vspace、loop、scrollamount、scrolldelay等,它们都是可选的......
    03-08
  • html符号转实体算法挑战的介绍

    html符号转实体算法挑战的介绍

    挑战: 将字符串中的字符 、、、 (双引号), 以及 (单引号)转换为它们对应的 HTML 实体。 如果你被卡住了,记得开大招 Read-Search-Ask。尝试与他人交流编程思路、但编写你自己的代码。 例如: convert(Dolce Gabbana) 应该返回 Dolce......
    03-04
  • HTMl中标签中li横向排列的实现

    HTMl中标签中li横向排列的实现

    大多数的导航栏都是横向排列如下图所示,那么这究竟是怎么实现的呢?其实它主要运用ul标签中li的横向排列,下面以一个例子向大家详细讲解具体是如何实现的。 1编写横向菜单的HTML代码架构 1 2 3 4 5 6 ul id = menu li a href = http://w......
    02-21
  • 详解网页编码之GB2312、GBK与UTF-8的区别

    详解网页编码之GB2312、GBK与UTF-8的区别

    首先,我们要明白,GB2312、GBK和UTF-8都是一种字符编码,除此之外,还有好多字符编码。只是对于我们中国人的网站来说,用这三种编码 比较多。简单的说一下,为什么要用编码,在计算机内,储存文本信息用ASC II码,每一个字符对应着唯一......
    12-22
  • 解决使用html2canvas对有百度地图的Dom元素处理成图片

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

    问题1:百度地图应用的是瓦片式图片(地图是一张张图片拼出来的),html2canvas 处理时,遇到非同一域名下的图片,浏览器会显示跨域的报错,也无法用反向代理来解决,因为瓦片图片的域名不确定,无法指定 proxy_pass 解决 :使用百度地图......
    10-14
  • html/css中float浮动的用法示例教程

    html/css中float浮动的用法示例教程

    一、float基础用法示例 1、我们先建两个div盒子,设置高度、宽度和背景颜色; 最开始两个盒子在网页上的位置如下: 然后我们将红色盒子浮动到右边 然后我们会发现红色盒子浮动到了右边,但是蓝色盒子就直接上移到了原先红色盒子的位置。 ......
    09-10

最新更新