How can I take a screenshot of a web page that contains an ESRI MapView?

558
4
12-05-2019 08:48 AM
JordanWright
New Contributor

I am trying to take a screenshot of a specific section of a web page that contains an ESRI MapView.  That MapView contains a FeatureLayer with features built locally on the client side.  I have tried using html2canvas, and everything on the page renders correctly, including rendering the map container, but the actual map data does not appear.  The Zoom UI tool and the attribution both show up correctly, but the map is just an empty gray box.  I have tried running html2canvas with both 'allowTaint: true' and 'useCORS: true', but neither makes a difference.

Has anyone had luck taking a screenshot of a page with an ESRI map embedded in it using html2canvas or any other tool?

I am using the Arcgis JS API version 4.12

0 Kudos
4 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Jordan,

  Why are you not using the builtin screenshot method in the API?

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

0 Kudos
JordanWright
New Contributor

Hey Robert!

I am trying to take a screenshot of an entire web page, not just the map.  As far as I can tell the screenshot method in the API only takes a screenshot of the specified MapView/SceneView.  My page has some tables, text, and other images that I want to be in the same screenshot as the map itself.  The screenshot needs to include the map and other elements on the page.

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Jordan,

   OK. So you can possibly combine the two then.

0 Kudos
KellyHutchins
Esri Frequent Contributor

Take a look at the screenshot widget available in the Esri GitHub repo. 

GitHub - Esri/screenshot-widget: Screenshot widget that captures screenshot images of map extent, a ... 

This widget combines the use of html2canvas with screenshot to print the legend, popup and view.