topic Re: How to take screenshot in Javascript for arcgis basemap with layers in ArcGIS JavaScript Maps SDK Questions

How to take screenshot in Javascript for arcgis basemap with layers

VenkataDunaka — Fri, 16 Mar 2018 20:09:45 GMT

Hi All,

How to capture the screenshot of map( basemap with additional layers) using Javascript?

Can anyone help on this? Thanks!

Re: How to take screenshot in Javascript for arcgis basemap with layers

RobertScheitlin__GISP — Sun, 12 Dec 2021 04:17:25 GMT

Venkata,

One of the best ways is to use the esri PrintTask to do this and request Map_Only as the layout.

Example code snippet:

        var oWid = map.width;
        var oHgt = map.height;
        var printTask = new PrintTask('.../rest/services/ExportWebMap/GPServer/Export_Web_Map');
        var template = new PrintTemplate();
        this.imgHeight = (740/oWid) * oHgt;
        template.exportOptions = {
          width: 1542,
          height: (1542/oWid) * oHgt,
          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, lang.hitch(this, this.printResult));

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

Re: How to take screenshot in Javascript for arcgis basemap with layers

VenkataSrikanthDasari — Mon, 19 Mar 2018 22:23:22 GMT

You can also use/download custom widget named Screenshot widget from the custom widgets list..

ArcGIS Web Application

And you have to use the latest version html2Canvas.js and html2Canvas.svg.js files..

Cheers,

Srikanth Dasari

Re: How to take screenshot in Javascript for arcgis basemap with layers

VenkataDunaka — Tue, 20 Mar 2018 20:26:05 GMT

Hi Srikanth, Thanks for your reply.

I have used html2canvas js to take the screenshot. But I am getting top layer details in the image. Not getting base layer image.

Used code:

document.getElementById("btnSave").addEventListener("click", printToFile);

//Creating dynamic link that automatically click
function downloadURI(uri, name) {
var link = document.createElement("a");
link.download = name;
link.href = uri;
link.click();
}

function printToFile() {
html2canvas(document.getElementById('panel-container')).then(
function (canvas) {
var myImage = canvas.toDataURL("image/png");
downloadURI("data:" + myImage, "yourImage.png");
});

html2canvas(document.getElementById('sceneDiv')).then(
function (canvas) {
var myImage = canvas.toDataURL("image/png");
downloadURI("data:" + myImage, "yourImage.png");
});

Re: How to take screenshot in Javascript for arcgis basemap with layers

VenkataSrikanthDasari — Tue, 27 Mar 2018 15:40:06 GMT

You have to download the html2canvas.js and html2canvas.svg.js 0.5.0 version files

You can attach the source code here so that I would like to take a look...

Re: How to take screenshot in Javascript for arcgis basemap with layers

Noah-Sager — Wed, 28 Mar 2018 20:24:07 GMT

As Robert said, the PrintTask is a great solution. I would also recommend the Print Widget if you don't need as fine-grained control. Here are some helpful links:

API Reference: Print Widget | API Reference | ArcGIS API for JavaScript 4.6

API Reference: PrintTask | API Reference | ArcGIS API for JavaScript 4.6

Sample app: Print Widget Sample | ArcGIS API for JavaScript 4.6

-Noah

Re: How to take screenshot in Javascript for arcgis basemap with layers

FlavieMORAUX1 — Wed, 11 Apr 2018 14:04:10 GMT

Hello srikanth dasari venkata‌,

I try to do the same thing but i have a problem. Generated image is almost empty, i have only buttons +/- and copyright, but nothing about content map.

I follow your advice, that is use 0.5.0 version... I also try to use last version but :

- there is always no map content.

- it does not work with IE 11.

Here is my code, do you see something wrong ?

Thanks a lot

Flavie

<!DOCTYPE html>
<html>
<head>
    <title>Test screen shot</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <link rel="stylesheet" href="https://js.arcgis.com/3.23/esri/css/esri.css">
    <style>
      #tools {
        top: 20px;
        color: #444;
        height: auto;
        font-family: arial;
        right: 20px;
        margin: 5px;
        padding: 10px;
        position: absolute;
        width: 115px;
        z-index: 40;
        border: solid 2px #666;
        border-radius: 4px;
        background-color: #fff;
      }
      html, body, #mapDiv {
        padding:0;
        margin:0;
        height:100%;
      }
      button {
        display: block;
      }
      #mapDiv{
        height: 250px;
      }
    </style>
    <script type="text/javascript" src="html2canvas.js"></script>
    <script src="https://js.arcgis.com/3.23/"></script>
    <script>
      var map;
      require([
        "esri/map", "esri/layers/ArcGISDynamicMapServiceLayer",
        "dojo/dom", "dojo/on", "dojo/domReady!"
      ], function(
        Map, ArcGISDynamicMapServiceLayer,
        dom, on
      ) {
        map = new Map("mapDiv", {
          basemap: "streets",
          center: [-25.312, 34.307],
          zoom: 3
        });
        map.on("load", init);

        var demographicsLayer = new ArcGISDynamicMapServiceLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer");
        map.addLayer(demographicsLayer);
        function init() {
          on(dom.byId("screenShotTool"), "click", function(evt) {
            screenShot();
          });
        }

        function screenShot(){
            html2canvas(document.getElementById('mapDiv')).then(function(canvas){
                document.body.appendChild(canvas);
            });
        }
      });
    </script>
</head>

<body>
    <div id="tools">
      <button id="screenShotTool">Screen shot</button>
    </div>
    <div id="mapDiv"></div>
</body>
</html>

Re: How to take screenshot in Javascript for arcgis basemap with layers

VenkataSrikanthDasari — Wed, 18 Apr 2018 19:30:12 GMT

Please have a look into screenshot widget for the proxy.php in the custom widgets list. Meanwhile, I would like to frame the code properly and will upload the working screenshot widget.

Cheers,

Srikanth Dasari

Re: How to take screenshot in Javascript for arcgis basemap with layers

FlavieMORAUX1 — Thu, 19 Apr 2018 11:47:14 GMT

I try webapp of demo (ArcGIS Web Application) and with widget from GitHub (GitHub - kevinsagis/ScreenshotDemo: Screenshot and SaveAs demo)... same error like me (screenshot does not work on webapp content).

Screenshot of webmap does not work because canvas conversion throw error on each layer :

Error in console : html2canvas: Error loading <img>:https://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/10/414/278
Error in response of proxy request : html2canvas_1("error: html2canvas-proxy-php: Can not create file");

On your side does it work?

Regards,

Flavie

Re: How to take screenshot in Javascript for arcgis basemap with layers

RobertScheitlin__GISP — Thu, 19 Apr 2018 12:33:30 GMT

Flavie,

This is the reason why I stick with the PrintTask as you do not have the issue of certain browsers and versions not supporting the Canvas route.

Re: How to take screenshot in Javascript for arcgis basemap with layers

FlavieMORAUX1 — Thu, 19 Apr 2018 14:05:22 GMT

Hy Robert,

ArcGIS Printing does not work in my case (not WAB but developpement from scratch).

I display secure content and go through esri proxy for automatic authentification. Esri proxy is problematic with printing, it does not add token access. Result print task fails.

That's the reason why I am studying screenshot solution.

Flavie

Re: How to take screenshot in Javascript for arcgis basemap with layers

Juan_ManuelAngel_Cuartas — Sun, 12 Dec 2021 04:17:27 GMT

Robert one question. this part of the code, return the result to the window i want for example if a want to show in a altert window ?

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

Re: How to take screenshot in Javascript for arcgis basemap with layers

RobertScheitlin__GISP — Thu, 19 Apr 2018 14:25:40 GMT

Juan,

What is returned is an image url so anything you can do with a image url is what you are limited to. I don't think I have ever tried to put an image in an alert. As far as I know an Alert can only take a string.

Re: How to take screenshot in Javascript for arcgis basemap with layers

Juan_ManuelAngel_Cuartas — Thu, 19 Apr 2018 14:29:49 GMT

Thank you robert, i refer an alert like a new window to put an example, thank you !

Re: How to take screenshot in Javascript for arcgis basemap with layers

VenkataSrikanthDasari — Thu, 19 Apr 2018 18:42:28 GMT

Hi,

Here is the code for taking the screenshot of the map. I think you have to use your own hosted layers to get the layers in the screenshot.

With this code you can download the image with high resolution. If you want to decrease resolution then you have to the below statements.

canvas.toDataURL("image/jpg", 0.5);

I can't attach the supported file here so you can download the below mentioned script files from the internet

1. html2canvas.js and html2canvas.svg.js

2. html2proxy.php from the screenshot widget

3. filesaver also from the screenshot widget.

<!DOCTYPE html>
<html>
<head>
<title>Test screen shot</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="https://js.arcgis.com/3.23/esri/css/esri.css">
<style>
#tools {
top: 20px;
color: #444;
height: auto;
font-family: arial;
right: 20px;
margin: 5px;
padding: 10px;
position: absolute;
width: 115px;
z-index: 40;
border: solid 2px #666;
border-radius: 4px;
background-color: #fff;
}
html, body, #mapDiv {
padding:0;
margin:0;
height:100%;
}
button {
display: block;
}
#mapDiv{
height: 100%;
}
</style>

<script type="text/javascript" src="html2canvas.js"></script>
<script type="text/javascript" src="html2canvas.svg.js"></script>
<script type="text/javascript" src="CanvasToBlob.js"></script>
<script type="text/javascript" src="fileSaver.js"></script>

<script src="https://js.arcgis.com/3.23/"></script>
<script>
var map;
require([
"esri/map", "esri/layers/ArcGISDynamicMapServiceLayer",
"dojo/dom", "dojo/on", "dojo/domReady!"
], function(
Map, ArcGISDynamicMapServiceLayer,
dom, on
) {
map = new Map("mapDiv", {
basemap: "streets",
center: [-25.312, 34.307],
zoom: 3
});
map.on("load", init);

var demographicsLayer = new ArcGISDynamicMapServiceLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer");
map.addLayer(demographicsLayer);
function init() {
on(dom.byId("screenShotTool"), "click", function(evt) {
screenShot();
});
}

function screenShot(){
// html2canvas(document.getElementById('mapDiv')).then(function(canvas){
// document.body.appendChild(canvas);
//});
html2canvas(document.getElementById("mapDiv_container"), {
"logging": true, //Enable log (use Web Console for get Errors and Warnings)
"useCORS": true,
//"allowTaint": true,
"proxy": "html2canvasproxy.php",
// "timeout": "0",
onrendered: function (canvas) {
//document.body.appendChild(canvas);
//this.screenshotDataURI = canvas.toDataURL("image/jpg", 0.5);
canvas.toBlob(function (blob) {
saveAs(blob, "Screenshot.png");
});

}
});
}
});
</script>
</head>

<body>
<div id="tools">
<button id="screenShotTool">Screen shot</button>
</div>
<div id="mapDiv"></div>
</body>
</html>

Please let me know if you have any questions.

Cheers,

Srikanth Dasari

Re: How to take screenshot in Javascript for arcgis basemap with layers

FlavieMORAUX1 — Fri, 20 Apr 2018 12:00:28 GMT

Great, it's ok now, thanks a lot

I undesrstand why map was always empty, html2canvas need parameter "useCORS" to access to services.

Regarding parameter "proxy" I found a javascript version (GitHub - niklasvh/html2canvas-proxy-nodejs: Express middleware proxy for html2canvas)... and it works to.

Best regards,

Flavie

Re: How to take screenshot in Javascript for arcgis basemap with layers

JavierPablos1 — Tue, 16 Oct 2018 10:54:38 GMT

Hello there,

Is there a webapp demo to see the screenshot widget? All the links provided seem to not be working.

Regards.

Re: How to take screenshot in Javascript for arcgis basemap with layers

VenkataSrikanthDasari — Wed, 07 Nov 2018 16:56:37 GMT

Hi Javier Pablos,

Please go through the above code and create a html page and follow the instructions to work and let me know if you have any issues....

Cheers,

Srikanth Dasari

Re: How to take screenshot in Javascript for arcgis basemap with layers

FabianMolina — Mon, 18 Mar 2019 10:02:04 GMT

Hi srikanth dasari venkata

have you tested with the 4.10 api version?

Re: How to take screenshot in Javascript for arcgis basemap with layers

VenkataSrikanthDasari — Thu, 28 Mar 2019 18:14:23 GMT

Nope.