Screenshot of Map Canvas using ArcGIS API for Javascript

PaulMcCord — Sat, 11 Dec 2021 22:58:17 GMT

I'm attempting to develop a function that will take a screenshot when an icon is clicked. I've found similar posts on GeoNet: https://community.esri.com/thread/211365-how-to-take-screenshot-in-javascript-for-arcgis-basemap-with-layers. However, when following these instructions, I'm unable to successfully get a screen capture. My goal is to have a user click on a print icon within the application that I'm developing and then have the map "canvas" download as a PDF. I'm using ArcGIS API for JS 4.11.

Below is my relevant code....

First, I add the necessary modules:

require([
      "esri/Map",
      "esri/views/MapView",
      "esri/Basemap",
      "esri/layers/VectorTileLayer",
      "esri/widgets/ScaleBar",
      "esri/geometry/Point",
      "esri/geometry/Extent",
      "esri/core/watchUtils",
      "esri/layers/MapImageLayer",
      "esri/tasks/PrintTask",
      "esri/tasks/support/PrintParameters",
      "esri/tasks/support/PrintTemplate",
      "esri/core/lang"

    ], function(Map, MapView, Basemap, VectorTileLayer, ScaleBar, Point, Extent, watchUtils, MapImageLayer, PrintTask, PrintParameters, PrintTemplate, lang) {‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Then, I create the function where the user clicks on the print icon, which should then create the screenshot. Much of this is taken from the above article I referenced.

$(window).ready(function() {
        $(".print_icon").click(function(){
          var printTask = new PrintTask("https://devarcgisent.waynecounty.lan/serverdev/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task");
          var template = new PrintTemplate();
          template.exportOptions = {
            width: 1500,
            height: 700,
            dpi: 200
          };
          template.format = "jpg";
          template.layout = "MAP_ONLY";
          template.preserveScale = false;
          template.showAttribution = false;
          var params = new PrintParameters();
          params.map = this.map;
          params.template = template;
          printTask.execute(params, printResult);

          function printResult(rsltURL){
            var mapImg = domConstruct.toDom('<img src="'+rsltURL.url+'" border="0" style="width:1500px;height:700px;"/>');
            domConstruct.place(mapImg, dom.byId("map_canvas"), "replace");
          }
        });
      });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

When I click on the print icon, I don't receive an error, but a screenshot is also not taken. I'm likely missing something in the code that I've written. Any help would be welcomed.

Re: Screenshot of Map Canvas using ArcGIS API for Javascript

RobertScheitlin__GISP — Tue, 09 Jul 2019 12:44:10 GMT

Paul,

In the 4.x API there is a method on the view for taking a screenshot:

https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html#takeScreenshot

Re: Screenshot of Map Canvas using ArcGIS API for Javascript

PaulMcCord — Tue, 09 Jul 2019 14:54:32 GMT

Thanks Robert, I wasn't aware of that method. I now have it working in my application. Thanks again!

topic Re: Screenshot of Map Canvas using ArcGIS API for Javascript in ArcGIS JavaScript Maps SDK Questions

Screenshot of Map Canvas using ArcGIS API for Javascript

Re: Screenshot of Map Canvas using ArcGIS API for Javascript

Re: Screenshot of Map Canvas using ArcGIS API for Javascript