坑有点多,层出不穷。好在还是基本做出来了。。。
- 地图情况:用了position:fixed定位,地图上还有各种自己画的线段、点、多边形区域。
- 功能目标:一键截图,能把地图区域的内容直接截取出来。
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