Esri proxy for Angular 7 project to screenshot

Question

My team is currently working on a web application with angular 7 front end and .net core 2.1 back-end. One of tasks i need to do is to grab a screenshot and attach it to an email. The web application has an esri-map.

For the purposes of capturing the screenshot i am using html2canvas package. It works as expected except for the part that it doesn't capture the esri map content. It captures everything else except the esri-map.

For the html2canvas function call, i set the allowTaint property and useCORS property to true. I did some further research and i came across the proxy property for html2canvas. It made me think, that could be the reason why the map is not being generated. I cant seem to find any clear instructions on how to set up a proxy for arcgis. I was wondering if someone could help me with this. any direction or help will be greatly appreciated. following snippet is my html2canvas call. html2canvas

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

Update Jan 11 2018

I reached out to Esri regarding this and their response was , we dont support angular 7, we only support Javascript. I asked them , what if i use the print task instead of html2canvas .

This is my code snippet using print task. hope this might help someone.

This is a function i wrote in one of the services to capture the map. it seems to work fine. I don't know if there is any overhead of using the utility task url provided by arcgis or using your own server to render these screenshots. For some reason , it didn't work when i used the my servers print task utility URL.

note : in the below code snippet =&gt is the arrow function =>

 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

You could try this library: https://github.com/WSDOT-GIS/arcgis-map-thumbnail-builder

I am not sure it is fully compatible with latest ArcGIS Javascript API but you probably can study the code sources to make it works with the version you are using.