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>