Screenshot Widget

Discussion created by kmsagis Champion on Jan 10, 2017
Latest reply on Jul 27, 2020 by kmsagis

Screenshot      (WAB 1.x works / WAB 2.x unknown)


This widget is designed to take a screenshot of the entire viewport of the WebApp window. Widget bar and all. It then prompts the user to open or save it as an image file. Note: this wdget requires PHP.


Screenshot widget at kevinsagis/ScreenshotDemo · GitHub

Widget demo at:  screenshotwidget


Why is Screenshot useful? Maybe your users want to see "exactly what you are seeing" which was my user request. This is powered by html2canvas, canvas to blob, and filesaver.js, Credits in documentation.

Status: 1.0 b 1 --   Screenshot works now, as in this link, with WebApp Builder 1.x.  It is unknown if working in WAB 2.x. Note sometimes there are minor graphical oddities like the button's CSS but these limitations are well explained by the html2canvas author Niklas. Also, minor caveat, at small-scale levels, i.e. zoomed out farther than 20,000, sometimes esri basemap tiles will not load. this appears to be a caveat with html2canvas and sporadic. Report results back. For our purposes this widget now works great!  I may turn it into a 'feedback' widget in the future.


I am using this proxy:  brcontainer/html2canvas-php-proxy · GitHub

Note as this uses PHP. There are also Python and ASP.NET proxies. These do not work inside WebApp Builder! WebApp Builder runs on node.js.  PHP will run inside node.js but only after you install some other libraries.  The simple solution I elected to follow is to put this widget into your application after Downloading it out of WebApp Builder, and tweak it after downloading, if desired.\


Screenshot "Alternate Version" 1.0:  If you need a true screenshot, use this:

Demo site: screenshotaltvers 

Git: kevinsagis/ScreenshotAlternateVers · GitHub   

It is just About with text instructing users to leverage the screenshot capability built in to the operating system (Windows).  For Mac, you'd add the text to press "Command (⌘)-Shift-3".  This is probably a better method anyway if you need a true screenshot. Javascript can never really do a true screenshot, by design, for security.  The Screenshot 1.0 original version just copies the DOM to a new canvas object, then other code pipes it to a Save As.   This 'alternate' widget has users leverage the screenshot Windows / MacOS provide.  You can edit the text easily in this because it is actually just the About widget.