1、基础截图功能代码：

先安装html2canvas

装包： npm install --save html2canvas

导入： import html2canvas from 'html2canvas';

<el-button type="success" size="mini" icon="el-icon-scissors" @click="screenShot">截图工具
</el-button>
...
<div id="mapView" ref="target">......地图......</div>

screenShot() {html2canvas(this.$refs.target, {useCORS: true, // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题}).then((canvas) => {if (navigator.msSaveBlob) {//IE10+let blob = canvas.msToBlob();return navigator.msSaveBlob(blob, name);} else {        this.addWatermark(canvas); //在图片上加水印let imageurl = canvas.toDataURL("image/png");//图片转为下载路径 // toDataURL 图片格式转成 base64let imagename = "截图";this.fileDownload(imageurl, imagename);}})
},
//下载图片
fileDownload(downloadUrl, downloadName) {let aLink = document.createElement("a");aLink.style.display = "none";aLink.href = downloadUrl;aLink.download = `${downloadName}.jpg`;document.body.appendChild(aLink);aLink.click();document.body.removeChild(aLink);
},

2、地图被封装成了一个组件,html2canvas无效了

在地图组件外层加一个div包住，指定ref="target"， html2canvas就能识别了。

无效：
<mapView ref="target"></mapView>有效：
<div style="width: 100%; height: 100%; position: relative" ref="target"><mapView></mapView>
</div>

vue + html2canvas + ArcGIS 3.x 地图一键截图功能踩坑之路(一)相关推荐

vue + html2canvas + ArcGIS 3.x 地图一键截图功能踩坑之路(二)
3.地图上画出的线有了,但是打点的图标图片没有了 ,标注点不显示 html2canvas的 useCORS: true 必加,否则地图的底图就空白了. 有些人说用allowTaint: true,首先 ...
canvas快速实现视频的一键截图功能
视频的一键截图功能,在现在非常常见,但是,你知道怎么做到的吗?? 简单粗暴的原理 - 利用canvas的2d图进行绘制视频中的某一帧在进行保存 html: <videostyle="w ...
cesium给地图添加比例尺学习踩坑记录
cesium给地图添加比例尺学习踩坑记录因项目需要在cesium地图中展示比例尺,本来应该是很简单的事,但却碰到了一个引用文件的坑,特此记录: *1.引用依赖文件相信需要用到cesium比例尺组件 ...
前端如何实现一键截图功能?
精彩回顾有点意思的gif动图生成平台开发实战(二) 如何实现H5可视化编辑器的实时预览和真机扫码预览功能在线IDE开发入门之从零实现一个在线代码编辑器基于React+Koa实现一个h5页面可视化 ...
Antd Vue range-picker 日期初始值设置与重置日期踩坑总结
一.业务场景: 1.用form表单包裹,用的是 Antd Vue range-picker链接 2.创建时间初始值设置为当天的 00:00:00-23:59:59:如下截图: 2.日期选择器如下截图: ...
html2canvas的踩坑之路
前言早有耳闻这个html2canvas比较坑,但无奈于产品需求的压迫,必须实现html转图片的功能,自此走上了填坑之路,好在最后的效果还算令人满意,这才没有误了产品上线周期. html2canvas ...
高德地图开发-常用api踩坑使用
一.高德地图的加载初始化在这就踩过很多坑,新建项目正常显示没问题,放到我们的项目就是不显示,加载不出来, 这个时候不要慌,只要确保下面三部完成就莫问题了 1.引入高德地图开发者api <scr ...
linux下安装截屏插件,Davinci 截图安装踩坑
Davinci 项目的配置文档很多地方没有写的很清楚, 导致开发人员在使用的过程中踩了不少坑. 今天整理一下Davinci的截图功能配置部分, 使用的操作系统是 Debian stretch. lin ...
在vue中使用腾讯地图绘制围栏功能
首先,先看效果图里面包含了自定义多边形绘制围栏.圆形绘制以及矩形等方式,以及清除围栏经纬度的方法和获取围栏经纬度的方法. 首先在项目的index.html中引入腾讯地图 <script cha ...

vue + html2canvas + ArcGIS 3.x 地图一键截图功能踩坑之路(一)

1、基础截图功能代码：

2、地图被封装成了一个组件,html2canvas无效了

vue + html2canvas + ArcGIS 3.x 地图一键截图功能踩坑之路(一)相关推荐

最新文章

热门文章