How to create an attachment with the current map screenshot ?

1057
5
Jump to solution
06-05-2017 05:39 AM
esriuser2
New Contributor II

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!

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

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');
      }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

0 Kudos
5 Replies
ThomasSolow
Occasional Contributor III

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.

0 Kudos
esriuser2
New Contributor II


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!

0 Kudos
ThomasSolow
Occasional Contributor III

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. 

0 Kudos
esriuser2
New Contributor II

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

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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');
      }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos