百度地图3.0截图，下载（解决图形下载偏移的问题）

最新推荐文章于 2024-08-04 16:33:59 发布

oliver666666

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量173

点赞数

分类专栏：百度地图相关功能点文章标签： javascript 前端 vue.js es6

本文链接：https://blog.csdn.net/oliver666666/article/details/139683192

版权

百度地图相关功能点专栏收录该内容

1 篇文章 0 订阅

订阅专栏

百度地图应用3.0开发的页面，需要截图并下载的功能。前端采用html2canvas生成base64图片

由于百度地图绘制多边形是svg，而html2canvas不支持生成。不绘制线的截图是正常的，绘制了线条就会出现偏移。以下是对比，上一张是正常的，下一张是使用html2canvas截图，会偏移

搜索了很多方法，又说用canvg的，试了下要么报错，要么空白，没用，最后找到用rasterizehtml进行转换，将dom中的目标svg转换为canvas。发现可以实现想要的需求

具体实现就是：通过id，获取地图div下的svg（变量备份一份svg的dom数据），转换为canvas，然后进行截图，需要注意，在替换时，需要延迟进行html2canvas截图，否则页面渲染未完成，截图截的是空白的。待截图完成，下载后。再将转换的canvas替换回svg，一定要替换回去。否则再次在地图上操作，会发现，地图上的线条不再跟随地图了，成静态的了。

有一点需要注意，html2canvas截图，图片跨域会截图不了，会空白，所以要么服务器允许跨域，要么设置代理。

# 允许跨域访问的配置
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';

以下是步骤：

1。安装html2canvas ,rasterizehtml

2.页面引用

import html2canvas from 'html2canvas'
import rasterizeHTML from 'rasterizehtml'

3.实现代码，地图父级div写入id即可

  downImage(idStr = 'baiduMapId') {
    // 备份原始的svg元素
    const svgBackups = []
    // 获取全部的svg
    const reportElement = document.getElementById(idStr)
    //   const reportElement = document.getElementById(idStr)
    const svgElems = reportElement.querySelectorAll('svg')
    console.log(svgElems)
    if (svgElems.length !== 0) {
      svgElems.forEach((item, index) => {
        // 获取svg的父元素
        const parentNode = item.parentNode

        // 获取svg内容及样式
        const svgHTML = (item.outerHTML || new XMLSerializer().serializeToString(item)).trim()
        const svgStyles = getComputedStyle(item)

        // 创建canvas元素,并根据svg设置宽
        const canvas = document.createElement('canvas')
        canvas.width = parseInt(svgStyles.width, 10)
        canvas.height = parseInt(svgStyles.height, 10)

        // 生成canvas
        rasterizeHTML.drawHTML(svgHTML, canvas)

        // 使用canvas代替svg
        parentNode.removeChild(item)
        parentNode.appendChild(canvas)

        // 备份原始的svg元素
        svgBackups.push({ parentNode, svgElement: item })
      })
    }
    setTimeout(() => {
      html2canvas(document.querySelector('#' + idStr), {
        useCORS: true,
        preserveDrawingBuffer: true,
        // foreignObjectRendering: true,
        allowTaint: true,
        scrollY: 0,
        scale: 1
      }).then(canvas => {
        const imgUrl = canvas.toDataURL('image/png')
        console.log(imgUrl)
        // 创建一个临时的 <a> 元素
        const link = document.createElement('a')
        link.href = imgUrl

        // 设置下载的文件名
        link.download = 'screenshot.png'

        // 模拟点击链接进行下载
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)

        /* if (svgBackups.length !== 0) {
          // 将canvas元素替换回原来的svg元素
          svgBackups.forEach(({ parentNode, svgElement }) => {
            parentNode.removeChild(parentNode.querySelector('canvas'))
            parentNode.appendChild(svgElement)
          })
        } */
      })
    }, 2000)
  },