topic Re: How to create an attachment with the current map screenshot ? in ArcGIS Web AppBuilder Questions

How to create an attachment with the current map screenshot ?

esriuser2 — Mon, 05 Jun 2017 12:39:52 GMT

Hi,

I am adding a custom widget to send an email with some description and map screenshot.Is there a way that I can create an attachment with the current map screen shot and is there any geoprocessing service to send an email ?

Thank you!

Re: How to create an attachment with the current map screenshot ?

ThomasSolow — Mon, 05 Jun 2017 18:52:21 GMT

ArcGIS Server/Portal does not come with an email server. If you have access to an email server then I imagine you could set this up.

Re: How to create an attachment with the current map screenshot ?

esriuser2 — Tue, 06 Jun 2017 15:35:14 GMT

Is there a custom code or widget that take a screen shot of the webapp window and give the option to save the image file ?

Thank you!

Re: How to create an attachment with the current map screenshot ?

ThomasSolow — Tue, 06 Jun 2017 15:39:28 GMT

There are two ways to do this that I know of. If it's a 3D sceneview in the 4.X API you can use scene.takeScreenshot. If you're using 3D I can give you an example.

If you're not, I recommend using this third party open source library: GitHub - tsayen/dom-to-image: Generates an image from a DOM node using HTML5 canvas

I know a few people who have successfully extracted a jpg from a 2D map using that.

Re: How to create an attachment with the current map screenshot ?

esriuser2 — Tue, 06 Jun 2017 16:04:44 GMT

Thank you Thomas! I am using 2D map, and above one seems not supported in all browsers

Re: How to create an attachment with the current map screenshot ?

RobertScheitlin__GISP — Sat, 11 Dec 2021 21:55:52 GMT

esri user,

I use the Print service for this with the map only template chosen.

....    
    'esri/tasks/PrintTemplate',
    'esri/tasks/PrintParameters',
    'esri/tasks/PrintTask',
],
  function(
....
    PrintTemplate, PrintParameters, PrintTask,
....

        map.infoWindow.hide();
        var oWid = map.width;
        var oHgt = map.height;
        var printTask = new PrintTask('.../rest/services/ExportWebMap/GPServer/Export_Web_Map');
        var template = new PrintTemplate();
//calc for maintaining the maps aspect ratio
        template.exportOptions = {
          width: 1542,
          height: (1542 / oWid) * oHgt,
          dpi: 200
        };
        this.imgHeight = (1542 / oWid) * oHgt;
        template.format = 'jpg';
        template.layout = 'MAP_ONLY';
        template.preserveScale = false;
        template.showAttribution = false;
        template.outScale = map.getScale();

        var params = new PrintParameters();
        params.map = map;
        params.template = template;
        printTask.execute(params, printResult);


      function printResult(rsltURL) {
        var mapImg = domConstruct.toDom('<img src="' + rsltURL.url + '" border="0" style="width:740px;height:"' + this.imgHeight + ';"/>');
        domConstruct.place(mapImg, mapImgDiv, 'replace');
      }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍