html利用html2canvas截取百度地图成图片并下载到本地，解决覆盖物截不到的问题

说实话，我也不是很熟，但是确实实现了，利用html2canvas截取百度地图很简单，但是要把覆盖物下下来却很难，尤其是轨迹，我是差了很多很多很多资料，最后综合了好几家给解决了；
大概思路也说不好，反正就是先转矢量图，在转png格式；
话不多说，上代码
第一步，引入html2canvas.js

<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>

第二步 直接调用callbackdata 方法就行了；
唯一需要注意的一点，地图所在的div的id和class是一样名字就可以了

						<div id="mapDiv" class="mapDiv">
                        </div>

			//  byh 截取图片 主方法 直接调用
            callbackdata = function () {
                PrtScn(".mapDiv").then((result) => {
                	//下载图片
                    download(result);
                });
            }

            /* 截图核心方法封装，获取base64 */
            function PrtScn(domName) {
                if (null == domName || '' == domName) {
                    throw ('dom name should not be null');
                }
                if ('#' != domName.charAt(0) && '.' != domName.charAt(0)) {
                    throw ('dom element only supports id or class');
                }
                let domIsNull = null;
                switch (domName.charAt(0)) {
                    case '#':
                        domIsNull = document.getElementById(domName.substr(1));
                        break;
                    case '.':
                        domIsNull = document.getElementsByClassName(domName.substr(1))[0];
                        break;
                    default:
                        break;
                }
                if (null == domIsNull) {
                    throw ('dom element should not be null');
                }
                // svg转canvas
                let nodesToRecover = [];
                let nodesToRemove = [];
                let svgElem;
                switch (domName.charAt(0)) {
                    case '#':
                        svgElem = document.getElementById(domName.substr(1)).getElementsByTagName('svg');
                        break;
                    case '.':
                        svgElem = document.getElementsByClassName(domName.substr(1))[0].getElementsByTagName('svg');
                        break;
                    default:
                        break;
                }
                let prepare = [];
                for (let i = 0; i < svgElem.length; i++) {
                    prepare.push(0);
                }
                for (let i = 0; i < svgElem.length; i++) {
                    let parentNode = svgElem[i].parentNode;
                    let canvas = document.createElement('canvas');
                    canvas.style.position = svgElem[i].style.position;
                    canvas.width = parseInt(svgElem[i].style.width);
                    canvas.height = parseInt(svgElem[i].style.height);
                    canvas.style.left = 0;
                    canvas.style.top = 0; // 生成与svg对应尺寸的canvas
                    let ctx = canvas.getContext('2d');
                    let svg_xml = (new XMLSerializer()).serializeToString(svgElem[i]);
                    let img = new Image();
                    img.src = "data:image/svg+xml;base64," + window.btoa(svg_xml);
                    img.onload = function () {
                        ctx.drawImage(img, 0, 0);
                        prepare[i] = 1;
                        //download(canvas.toDataURL("image/png")); // 调试用
                    }
                    parentNode.appendChild(canvas); // 使用canvas代替svg进行截图
                    nodesToRemove.push({ // 完成截图后删除canvas
                        parent: parentNode,
                        child: canvas
                    });
                    nodesToRecover.push({ // 完成截图后恢复svg
                        parent: parentNode,
                        child: svgElem[i]
                    });
                    parentNode.removeChild(svgElem[i]); // 暂时移除svg
                }
                return new Promise((resolve) => {
                    let waitInterval = setInterval(() => {
                        let isComplete = true; // 创建定时器，等待上面img.onload的异步操作
                        for (let i = 0; i < prepare.length; i++) {
                            if (prepare[i] == 0) {
                                isComplete = false;
                                break;
                            }
                        }
                        if (isComplete) {
                            clearInterval(waitInterval);
                            // div转canvas截图
                            let domElem;
                            switch (domName.charAt(0)) {
                                case '#':
                                    domElem = document.getElementById(domName.substr(1));
                                    break;
                                case '.':
                                    domElem = document.getElementsByClassName(domName.substr(1))[0];
                                    break;
                                default:
                                    break;
                            }
                            html2canvas(domElem, {
                                useCORS: true,
                                foreignObjectRendering: true,
                                allowTaint: false,
                                taintTest: true,
                                scale: 1
                            }).then((cnv) => {
                                let imgUrl = cnv.toDataURL("image/png"); // 将canvas转换成img的src流，base64
                                for (let i = 0; i < nodesToRecover.length; i++) {
                                    nodesToRecover[i].parent.appendChild(nodesToRecover[i].child);
                                }
                                for (let i = 0; i < nodesToRemove.length; i++) {
                                    nodesToRemove[i].parent.removeChild(nodesToRemove[i].child);
                                }
                                resolve(imgUrl);
                            });
                        }
                    }, 5);
                });
            }

            /* 下载图片的方法 */
            function download(url) {
                let a = document.createElement('a');
                a.style.display = 'none';
                document.body.appendChild(a);
                let triggerDownload = $(a).attr("href", url).attr("download", "order-1111111111.png");
                triggerDownload[0].click();
                document.body.removeChild(a)
            }

今天写代码遇到个问题，就是想在后台下载怎么下载…反正最后是解决了，如果也有相同问题的，可以给我留言或者私信我，我再写一篇文章；