Screenshot of Map Canvas using ArcGIS API for Javascript

Jump to solution
07-09-2019 05:03 AM
Occasional Contributor

I'm attempting to develop a function that will take a screenshot when an icon is clicked. I've found similar posts on GeoNet: 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:


    ], 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() {
          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.template = template;
          printTask.execute(params, printResult);

          function printResult(rsltURL){
            var mapImg = domConstruct.toDom('<img src="'+rsltURL.url+'" border="0" style="width:1500px;height:700px;"/>');
  , 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.

0 Kudos
1 Solution

Accepted Solutions
MVP Esteemed Contributor
0 Kudos
2 Replies
MVP Esteemed Contributor


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

0 Kudos
Occasional Contributor

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

0 Kudos