Hi All,
How to capture the screenshot of map( basemap with additional layers) using Javascript?
Can anyone help on this? Thanks!
Nope.
Hi srikanth dasari venkata
have you tested with the 4.10 api version?
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
Hello there,
Is there a webapp demo to see the screenshot widget? All the links provided seem to not be working.
Regards.
Thank you robert, i refer an alert like a new window to put an example, thank you !
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.
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 ?
<SPAN class="" style="color: #0077aa; border: 0px; font-weight: inherit;">function</SPAN> <SPAN class="" style="color: #d74444; border: 0px; font-weight: inherit;">printResult</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">(</SPAN>rsltURL<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">)</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">{</SPAN> <SPAN class="" style="color: #0077aa; border: 0px; font-weight: inherit;">var</SPAN> mapImg <SPAN class="" style="color: #a67f59; background: rgba(255, 255, 255, 0.5); border: 0px; font-weight: inherit;">=</SPAN> domConstruct<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">.</SPAN><SPAN class="" style="color: #d74444; border: 0px; font-weight: inherit;">toDom</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">(</SPAN><SPAN class="" style="color: #669900; border: 0px; font-weight: inherit;">'<img src="'</SPAN><SPAN class="" style="color: #a67f59; background: rgba(255, 255, 255, 0.5); border: 0px; font-weight: inherit;">+</SPAN>rsltURL<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">.</SPAN>url<SPAN class="" style="color: #a67f59; background: rgba(255, 255, 255, 0.5); border: 0px; font-weight: inherit;">+</SPAN><SPAN class="" style="color: #669900; border: 0px; font-weight: inherit;">'" border="0" style="width:740px;height:'</SPAN><SPAN class="" style="color: #a67f59; background: rgba(255, 255, 255, 0.5); border: 0px; font-weight: inherit;">+</SPAN><SPAN class="" style="color: #0077aa; border: 0px; font-weight: inherit;">this</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">.</SPAN>imgHeight<SPAN class="" style="color: #a67f59; background: rgba(255, 255, 255, 0.5); border: 0px; font-weight: inherit;">+</SPAN><SPAN class="" style="color: #669900; border: 0px; font-weight: inherit;">'px;"/>'</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">)</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">;</SPAN> domConstruct<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">.</SPAN><SPAN class="" style="color: #d74444; border: 0px; font-weight: inherit;">place</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">(</SPAN>mapImg<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">,</SPAN> dom<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">.</SPAN><SPAN class="" style="color: #d74444; border: 0px; font-weight: inherit;">byId</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">(</SPAN><SPAN class="" style="color: #669900; border: 0px; font-weight: inherit;">'mapImgDiv'</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">)</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">,</SPAN> <SPAN class="" style="color: #669900; border: 0px; font-weight: inherit;">'replace'</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">)</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">;</SPAN> <SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">}</SPAN>
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>
<!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>
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
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...
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"); });
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..
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:
<SPAN class="keyword token">var</SPAN> oWid <SPAN class="operator token">=</SPAN> map<SPAN class="punctuation token">.</SPAN>width<SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> oHgt <SPAN class="operator token">=</SPAN> map<SPAN class="punctuation token">.</SPAN>height<SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> printTask <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">PrintTask</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'.../rest/services/ExportWebMap/GPServer/Export_Web_Map'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> template <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">PrintTemplate</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>imgHeight <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="number token">740</SPAN><SPAN class="operator token">/</SPAN>oWid<SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">*</SPAN> oHgt<SPAN class="punctuation token">;</SPAN> template<SPAN class="punctuation token">.</SPAN>exportOptions <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN> width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">1542</SPAN><SPAN class="punctuation token">,</SPAN> height<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="number token">1542</SPAN><SPAN class="operator token">/</SPAN>oWid<SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">*</SPAN> oHgt<SPAN class="punctuation token">,</SPAN> dpi<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">200</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN> template<SPAN class="punctuation token">.</SPAN>format <SPAN class="operator token">=</SPAN> <SPAN class="string token">"jpg"</SPAN><SPAN class="punctuation token">;</SPAN> template<SPAN class="punctuation token">.</SPAN>layout <SPAN class="operator token">=</SPAN> <SPAN class="string token">"MAP_ONLY"</SPAN><SPAN class="punctuation token">;</SPAN> template<SPAN class="punctuation token">.</SPAN>preserveScale <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">;</SPAN> template<SPAN class="punctuation token">.</SPAN>showAttribution <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> params <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">PrintParameters</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> params<SPAN class="punctuation token">.</SPAN>map <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>map<SPAN class="punctuation token">;</SPAN> params<SPAN class="punctuation token">.</SPAN>template <SPAN class="operator token">=</SPAN> template<SPAN class="punctuation token">;</SPAN> printTask<SPAN class="punctuation token">.</SPAN><SPAN class="token function">execute</SPAN><SPAN class="punctuation token">(</SPAN>params<SPAN class="punctuation token">,</SPAN> lang<SPAN class="punctuation token">.</SPAN><SPAN class="token function">hitch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>printResult<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="token function">printResult</SPAN><SPAN class="punctuation token">(</SPAN>rsltURL<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">var</SPAN> mapImg <SPAN class="operator token">=</SPAN> domConstruct<SPAN class="punctuation token">.</SPAN><SPAN class="token function">toDom</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'<img src="'</SPAN><SPAN class="operator token">+</SPAN>rsltURL<SPAN class="punctuation token">.</SPAN>url<SPAN class="operator token">+</SPAN><SPAN class="string token">'" border="0" style="width:740px;height:'</SPAN><SPAN class="operator token">+</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>imgHeight<SPAN class="operator token">+</SPAN><SPAN class="string token">'px;"/>'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> domConstruct<SPAN class="punctuation token">.</SPAN><SPAN class="token function">place</SPAN><SPAN class="punctuation token">(</SPAN>mapImg<SPAN class="punctuation token">,</SPAN> dom<SPAN class="punctuation token">.</SPAN><SPAN class="token function">byId</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'mapImgDiv'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'replace'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
