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

本文主要是介绍百度地图3.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 = []// 获取全部的svgconst 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)// 生成canvasrasterizeHTML.drawHTML(svgHTML, canvas)// 使用canvas代替svgparentNode.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)},

这篇关于百度地图3.0截图，下载（解决图形下载偏移的问题）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---