Question

我的团队目前正在使用带有angular 7前端和.net core 2.1后端的Web应用程序进行工作。我需要做的任务之一是获取屏幕截图并将其附加到电子邮件中。该Web应用程序具有esri映射。

出于捕获屏幕截图的目的，我使用的是html2canvas软件包。除了不捕获esri映射内容的部分之外，它均按预期工作。它捕获除esri-map之外的所有其他内容。

对于html2canvas函数调用，我将allowTaint属性设置为useCORS属性。我做了一些进一步的研究，发现html2canvas的proxy属性。这让我想到，这可能就是未生成地图的原因。我似乎找不到关于如何为arcgis设置代理的任何明确说明。我想知道是否有人可以帮助我。任何方向或帮助将不胜感激。以下代码段是我的html2canvas调用。 html2canvas

html2canvas(document.getElementById('mapContainer'), { useCORS: true, logging: true, allowTaint: true }).then((canvas) => {
console.log("Document html2canvas");
console.log(document);
screenCapture = canvas.toDataURL();
]);

更新2018年1月11日

我就此与Esri取得了联系，他们的回答是，我们不支持angular 7，我们仅支持Javascript。我问他们，如果我使用打印任务而不是html2canvas会怎样。

这是我使用打印任务的代码段。希望这可以对某人有所帮助。

这是我在其中一项服务中编写的用于捕获地图的函数。它似乎工作正常。我不知道使用arcgis提供的实用程序任务url或使用您自己的服务器来呈现这些屏幕截图是否有任何开销。出于某种原因，当我使用服务器的打印任务实用程序URL时，它不起作用。

注意：在下面的代码片段=>中是箭头功能=>

 screenCapture(): Promise<any> {
      return new Promise((resolve, reject) => {
        loadModules(['esri/tasks/PrintTask', 'esri/tasks/support/PrintTemplate', 'esri/tasks/support/PrintParameters']).then(([PrintTask, PrintTemplate, PrintParameters]) => {
          try {
            var printTask = new PrintTask({
              url: 'https://utility.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task/',
              updateDelay: '3000'
            });
            var template = new PrintTemplate({
              layout: "map_only",
              exportOptions: {
                dpi: 96,
                width: 1871,
                height: 800
              },
            });
            var params = new PrintParameters({
              view: this.mapView,
              template: template
            });
            printTask.execute(params).then(res => { console.log(res); resolve(res); });
          }
          catch (error) {
            console.log(error);
            reject(error);
          }          
        });
      });
  } // end ofScreenCapture

Answer 1

您可以尝试以下库：https://github.com/WSDOT-GIS/arcgis-map-thumbnail-builder

我不确定它是否与最新的ArcGIS Javascript API完全兼容，但是您可能可以研究代码源以使其与您使用的版本兼容。

用于Angular 7项目的Esri代理进行截图

1 个答案: