采用html2canvas插件，截取百度地图

最近项目中有个需求，就是一个百度地图页面，需要添加一个截图按钮，截图百度地图页面，生成图片，我百度了，发现html2canvas这个插件能截图，我也试了，但是发现截出来的页面，在地图那块是空白的，最后通过研究，终于实现了地图截图，具体实现如下：

安装

npm i html2canvas

引入

import html2canvas from 'html2canvas'

用法

<template>
  <div id="screen" class="dashboard-container">
    <el-button type="primary" @click="screenShot">截图el-button>
    <div class="map-box">
      <div id="map" class="map">div>
    div>
  div>
template>
 
<script>
import html2canvas from 'html2canvas';
export default {
  name: 'Dashboard',
  data () {
    return {
      map: null,
      center: {
        lng: 116.403694,
        lat: 39.927552
      },
      zoom: 15,
    }
  },
  mounted () {
    this.initMap()
  },
  methods: {
    screenShot () {
      const element = document.getElementById('screen')
      const options = {
        useCORS: true,
        // preserveDrawingBuffer: true,
        //foreignObjectRendering: true,
        allowTaint: true,
      }
      html2canvas(element, options).then(canvas => {
        const png = canvas.toDataURL("image/png") //拿到截图后转换为png图片
        const img = document.createElement('img')
        img.setAttribute('src', png)
        window.document.body.appendChild(img) //将png图片添加到页面验证
        console.log('png:', png)
        this.downLoad(png)
      })
    },
    downLoad (png) {
      //创建一个a标签
      var a = document.createElement('a')
      //指定下载文件名称
      a.href = png;
      a.download = '截图'
      //a 标签 需要点击触发。所以强制给他分派一个点击事件
      //创建一个鼠标事件
      let event = document.createEvent("MouseEvents")
      // 初始化鼠标事件
      event.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
      // 指定元素对象触发事件
      a.dispatchEvent(event)
    },
    initMap () {
      this.$nextTick(() => {
        this.map = new BMapGL.Map('map')
        this.map.enableScrollWheelZoom(true)
        this.map.centerAndZoom(new BMapGL.Point(this.center.lng, this.center.lat), this.zoom)
        let marker = new BMapGL.Marker(new BMapGL.Point(this.center.lng, this.center.lat))
        this.map.addOverlay(marker)
      })
    }
  }
}
script>
 
<style lang="scss" scoped>
.map-box {
  margin-top: 30px;
  width: 100vw;
  height: 500px;
 
  .map {
    width: 100%;
    height: 100%;
  }
}
style>

效果

html5使用html2canvas实现浏览器截图的示例

pdf 0星 超过10%的资源 113KB

下载

修改后

<template>
  <div id="screen" class="dashboard-container">
    <el-button type="primary" @click="screenShot">截图el-button>
    <div class="map-box">
      <div id="map" class="map">div>
    div>
  div>
template>
 
<script>
import html2canvas from 'html2canvas';
export default {
  name: 'Dashboard',
  data () {
    return {
      map: null,
      center: {
        lng: 116.403694,
        lat: 39.927552
      },
      zoom: 15,
    }
  },
  mounted () {
    this.initMap()
  },
  methods: {
    screenShot () {
      const element = document.getElementById('screen')
      const options = {
        useCORS: true,
        // preserveDrawingBuffer: true,
        //foreignObjectRendering: true,
        allowTaint: true,
      }
      html2canvas(element, options).then(canvas => {
        const png = canvas.toDataURL("image/png") //拿到截图后转换为png图片
        const img = document.createElement('img')
        img.setAttribute('src', png)
        window.document.body.appendChild(img) //将png图片添加到页面验证
        console.log('png:', png)
        this.downLoad(png)
      })
    },
    downLoad (png) {
      //创建一个a标签
      var a = document.createElement('a')
      //指定下载文件名称
      a.href = png;
      a.download = '截图'
      //a 标签 需要点击触发。所以强制给他分派一个点击事件
      //创建一个鼠标事件
      let event = document.createEvent("MouseEvents")
      // 初始化鼠标事件
      event.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
      // 指定元素对象触发事件
      a.dispatchEvent(event)
    },
    initMap () {
      this.$nextTick(() => {
        this.map = new BMapGL.Map('map')
        this.map.enableScrollWheelZoom(true)
        this.map.centerAndZoom(new BMapGL.Point(this.center.lng, this.center.lat), this.zoom)
        let marker = new BMapGL.Marker(new BMapGL.Point(this.center.lng, this.center.lat))
        this.map.addOverlay(marker)
        // const view = new SceneView({
        //   container: 'map',
        //   this.map,
        // });
        // props.setMapView(view);
 
        // 解决html2canvas截图空白问题
        HTMLCanvasElement.prototype.getContext = function (origFn) {
          return function (type, attributes) {
            if (type === 'webgl') {
              attributes = Object.assign({}, attributes, {
                preserveDrawingBuffer: true,
              });
            }
            return origFn.call(this, type, attributes);
          };
        }(HTMLCanvasElement.prototype.getContext);
      })
    }
  }
}
script>
 
<style lang="scss" scoped>
.map-box {
  margin-top: 30px;
  width: 100vw;
  height: 500px;
 
  .map {
    width: 100%;
    height: 100%;
  }
}
style>

 最终效果