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.
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.
