ArcGIS API for JavaScript 3 地图截图打印

**

vue2+ArcGIS API for JavaScript 3 框选部分地图后将截图打印

**
思路：
（原理大概是先通过dom-to-image或者html2canvas截取地图大图（此处dom-to-image存在问题，下文中有描述，不太建议使用），并获取地图的屏幕经纬度；再通过arcgis的draw框选图形，得到框选范围内的经纬度并转为屏幕坐标；再通过canvas绘图、地图大图和相关屏幕坐标，得到截图base64内容，将截图加载到img中，通过插件vue-print-nb打印该img图片）
本文暂时只更新了怎么截取地图整张图

一：dom-to-image（问题排雷，不建议使用）：
npm安装相关包：
npm install dom-to-image@2.6.0 --save
需要引入的页面引入：
import domtoimage from ‘dom-to-image’;
页面部分代码：

//html部分
<div id="map" ref="map"></div>
<img id="printMe" style="heiht:100%">
//script部分
domtoimage
   .toPng(document.getElementById('map'))
   .then(function(dataUrl) {
       if (dataUrl.length <= 6) {
           console.log("屏幕截图结果为空,建议放大地图,重新截图操作试试看");
           return;
       }
       //过渡img图片,为了截取img指定位置的截图需要
       var img = new Image();
       img.src = dataUrl;
       img.onload = function() {
	       console.log('图片',dataUrl);
	       document.getElementById("printMe").src=dataUrl;
       }
   })
   .catch(function(error) {
       console.error("oops, something went wrong!", error);
   });

问题1：
没按F12打开控制台直接运行，过几秒页面没反应，打开控制台不知道为啥出现了这样的错误

按了F12打开控制台再运行，如下图正常获取数据

问题2：
网上查到该插件存在图片过大就会很慢的问题，经测试在按F12打开控制台能正常获取图片的情况下，截图也出现了明显一两秒的卡顿

二：html2canvas：（此处正常截图）
npm安装相关包：
npm install html2canvas@1.4.1 --save
需要引入的页面引入：
import html2canvas from ‘html2canvas’;
页面部分代码：

//html部分
<div id="map" ref="map"></div>
<img id="printMe" style="heiht:100%">
//script部分
html2canvas(document.getElementById('map'), {
    useCORS: true, // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
}).then((canvas) => {
    if (navigator.msSaveBlob) {
        //IE10+（此处IE10+是否有效未测试）
        let blob = canvas.msToBlob();
        return navigator.msSaveBlob(blob, name);
    } else {        
        let dataUrl = canvas.toDataURL("image/png");
        //图片转为下载路径 // toDataURL 图片格式转成 base64
        console.log('imageurl',dataUrl);
        //过渡img图片,为了截取img指定位置的截图需要
        var img = new Image();
        img.src = dataUrl;
        img.onload = function() {
	       console.log('图片',dataUrl);
	       document.getElementById("printMe").src=dataUrl;
        }
        document.getElementById("printMe").src=dataUrl;
    }
})