I just stumbled across this post, and it's interesting to see people are still talking about this two- years -old topic. and it's also surprised me that we still don't have a very good solution in JavaScript API for ArcGIS ( according to what people said here)
There are lots of benefits to have a screenshot of the current map on the screen programmatically, one of them is efficiency.
In one of my Flex projects, when generating a report in a "classic and proper" way - from server side using python of course -- it took up to 3 minutes! and that was in the testing environment and no concurrent requests at all. of course, hundreds of layers in my map was to blame... then I scraped the "classic" way and took a shortcut by generating the report on the client side, then I trimmed the report generating time to seconds. the map quality in the report? not too bad. Furthermore, using the unique Flash feature, I could even put some sequence numbers on the selected map features (so that the items in the list can be referred back to the map) in one Frame, and took a snapshot, then restore the map in the next Frame... Yes, flex running in flash player frame after frame like playing a video...
Do a proximity search and view report, then you know what I mean. This function was built about 4 years ago.
I'v done the transition from flex to JavaScript, I have built some apps using JavaScript API for ArcGIS, but my personal view is Flex was more elegant than JavaScript as a programming language... not only in the ability it allows you to create a bitmap clipping and copying the map area on the screen, but in the simplicity and elegancy as an advanced language whole. well, although I have this reflection, but don't get me wrong, I am sober: the trend has been set: HTML5 and JavaScript are the future, like it or not, we have to embrace it. Just hope we'll get the cool stuff we had in Flex in JS soon.
Thank you for reading this post and sorry it did not provide a solution.
Simo,
Coming form the Flex world myself I remember how easy it was to get a bitmap of the map and use it in my custom client side reporting. I have asked a couple of the JS API development team about this and found that this ability does not exist currently but with 4.x of the API it will be more like to a possibility. Currently I use the PrintTask to print a JPG of the map and then use that JPG in the report that I am generating clientside. The advanced report generation that I had in Flex was actually pretty easy to migrate to JS once I figured out how to get the maps image.
Thanks Robert.
It sounds promising. I will do more research on this when I need to migrate the stuff I did into JS or in some other projects. This should be a very common function in web mapping applications.
Ah yes @simu_xu, I agree many things were easier in Flash. Some, were even better, to this day. This particular thing though is because Flash as a plugin can cut through browser security restrictions. Javascript not being able to take screenshots is a good security restriction. Re-rendering the DOM like my ScreenshotKevin's Custom WAB Widgets or Jeff Jacobson's is really the only way, but I can see how it is useful. And Jeff, that is a neat widget! Thanks for sharing!
By the way, due to various issues with my Screenshot widget like rendering complex text labels and annotations, I had to punt so to speak. I copied the About widget, then put in a photo of a keyboard with the Print Screen key highlighted and a message that simply tells users to use their Print Screen key. (They're Windows users. For Mac, you could just add text for the Cmd-Shft-3 key combo).
I wrote a web application about a year ago that uses the HTML canvas to create a thumbnail image of a map.
Jeff,
How cross platform is this solution?
Everything is done client-side, so the only requirement is a modern web browser.
Nice! I am using the "print" service as our "export" feature. For browser printing, I am simply scraping the HTML from the map container and creating a static print pop-up. This works fairly well.
This is a great utility! I'm having a small issue and am hoping you can provide some guidance. When I create my map 'screenshot' it is the same size as the map view in my application. I would like to make the screenshot a thumbnail size. Can you offer any direction on how to do this?
EDIT: Right after posting this I though I'd try modifying the CSS stylesheet...worked like a charm!