topic Re: Export the map to an image, client-side, for printing? in ArcGIS JavaScript Maps SDK Questions

Export the map to an image, client-side, for printing?

IanWatkins — Thu, 20 Jun 2013 13:48:28 GMT

I'm guessing the answer is still no and I'm guessing it is still not planned.

I have a requirement to output an image of the final map for the user to save. The map has a tile base with overlays of contour lines generated by our application.

As the application will be run deployed (server and client on a laptop) we don't want to have to build/maintain an ArcGIS 10.1 box just for the purpose of allowing the print service (our tiles are static on our web server). Simple cannot justify it on cost alone.

A simple way to simply output a JPEG/PNG of what the map is showing would be great. A "native" to ESRI JS API "screenshot" is all.

Any plans? Any real reason why not?

It's a little frustrating. "Get away from native desktop apps., go Web 2.0" they said. So we started using Flex/Flash which can do these sort of things clientside. "Get away from Flash/Flex, move to HTML5, it's the future" they said. Now look, we are trying to do desktop type work on a web type app. Can you explain this to your managers, nope. :mad:

Cheers

Ian

Re: Export the map to an image, client-side, for printing?

RichardBetts — Thu, 30 Jan 2014 18:25:56 GMT

Hi, Hope I am OK to resurrect this topic. I thought it would be better than starting a new thread on the same topic.
Just wondering if anyone has made progress with this?

I am currently trying to do pretty much the same thing, grab an image of the map (including graphics) to use elsewhere in my application.
I too don't have access to a server side print service/export web map task and have been trying to do this client side. Or as client side as possible.
If I did have access to an ArcGIS server instance it would be at version 10.0 for the time being.

I have made some progress using the html2canvas library to create a html5 canvas element from the map div.
This gives me a 'picture' of the basemap but does not handle any user defined graphics (SVG). I can however separately create an image of the graphics and add this image onto the canvas, being careful to make sure they line up properly.
I then create a smaller copy of the canvas and finally generate a new image from this canvas to add to a new div elsewhere on the page.
The user then has the option to save/print this smaller picture of the map to pdf (using a server side pdf generator).

This all seems to work OK, unless the canvas has been 'tainted' by cross domain content. Which in my case, it will always have been because the basemap service is hosted on a different domain to the application itself.
html2canvas on GitHub offers a php proxy to handle this situation but this appears to store a copy of all the map tiles in the application web server, effectively building up a second cache of map tiles copied from the basemap service.
Not really what I want.

Can anyone suggest a better method or is the canvas element the only option if the print task/service route is not available?

Thanks

Richard

Re: Export the map to an image, client-side, for printing?

JeffPace — Thu, 30 Jan 2014 19:33:35 GMT

At the moment, it still has to be serverside.

I ventured down the html5 canvas path as well, but i still support ie7/8, so its out

Flash/Flex out for many many reasons, not limited to security, update-ability, avoiding plugins, "a future", etc..

Does the ESRI api need a map.toImage() method that renders tiles/dynamic/graphics accurately? absolutely. Are we there yet? Not even close

Re: Export the map to an image, client-side, for printing?

JianHuang — Thu, 30 Jan 2014 20:33:30 GMT

If you can see everything in the map, why it has to go through a proxy to get other things? And img tags from the tiled map service are not contrained by cross-domain policy.

Hi, Hope I am OK to resurrect this topic. I thought it would be better than starting a new thread on the same topic.
Just wondering if anyone has made progress with this?

I am currently trying to do pretty much the same thing, grab an image of the map (including graphics) to use elsewhere in my application.
I too don't have access to a server side print service/export web map task and have been trying to do this client side. Or as client side as possible.
If I did have access to an ArcGIS server instance it would be at version 10.0 for the time being.

I have made some progress using the html2canvas library to create a html5 canvas element from the map div.
This gives me a 'picture' of the basemap but does not handle any user defined graphics (SVG). I can however separately create an image of the graphics and add this image onto the canvas, being careful to make sure they line up properly.
I then create a smaller copy of the canvas and finally generate a new image from this canvas to add to a new div elsewhere on the page.
The user then has the option to save/print this smaller picture of the map to pdf (using a server side pdf generator).

This all seems to work OK, unless the canvas has been 'tainted' by cross domain content. Which in my case, it will always have been because the basemap service is hosted on a different domain to the application itself.
html2canvas on GitHub offers a php proxy to handle this situation but this appears to store a copy of all the map tiles in the application web server, effectively building up a second cache of map tiles copied from the basemap service.
Not really what I want.

Can anyone suggest a better method or is the canvas element the only option if the print task/service route is not available?

Thanks

Richard

Re: Export the map to an image, client-side, for printing?

RichardBetts — Fri, 31 Jan 2014 18:32:08 GMT

Thanks for the replies.
Jian - I am more of a GIS person than a web person, but here's how I understand it...

If I don't use a proxy to read the basemap tiles onto the new canvas, the canvas is considered to be tainted and I will be unable to use the toDataURL() method to create an image data URL which I then intend to use as the source of an img element.
I need the img element because a canvas will never appear on my pdf, tainted or not.
In other words - 'If the canvas has been tainted, you can no longer pull data back out of the canvas'.

Using html2canvas with the proxy very nearly gives me what I need, other than this issue of the map tiles being physically copied to my web server. I guess I assumed the proxy would work in the same way as it does for wms capabilities requests, as a 'middleman' to make the responses appear to be from the same domain.

Jeff -Totally agree. Thanks

Re: Export the map to an image, client-side, for printing?

PhilReese1 — Fri, 14 Mar 2014 20:27:27 GMT

Rich,

I'm doing something similar and I talked to a couple folks around the office and they suggested using a Scheduled Task a few times a day on the server to delete the local cache of images that are generated.

Re: Export the map to an image, client-side, for printing?

MayJeff — Sat, 20 Sep 2014 17:36:05 GMT

Can you show me a sample you use for printing ? Thanks.

Re: Export the map to an image, client-side, for printing?

Anonymous User — Fri, 22 May 2015 13:28:51 GMT

old thread resurrection time!

I'm working on making a Screenshot widget in WebApp Builder using html2canvas. I will post this thread in WAB Widgets forum soon but thought to post here first as you all have experience with html2canvas.

I have a working demo of a page that creates a screenshot and opens the standard Save As... browser dialogue here - kevinsagis/ScreenshotDemo · GitHub this is everything all in one HTML file. Just open it localhost or a IDE like Visual Studio. (note this is a repost of a js Fiddle because it does not work on js Fiddle for some reason, all credit for all authors in comments and Read Me)

I also have the work in progress widget where I am porting this code into WAB, here. kevinsagis/Screenshot-Widget · GitHub . This not only runs the DOM through html2canvas, it then converts it into a "blob" (not sure really what this is... ?? .. but hey it works) then makes the browser open a "Save As.." dialogue for the DOM element as a .PNG image file. So I intend to grab the whole viewport, via the DOM "main-page" or "map" node in WAB. Would like main-page so as to grab widgets, attrib table. Users want a "print screen" button. This is the closest we can get of course with Javascript, considering browser security limitations.

So when I ported the code into WAB, pointed it to main-page and said

var windowScreenShot = dom.byId("main-page");

html2canvas((windowScreenShot), {

onrendered: function (canvas) {

theCanvas = canvas;

window.open("", canvas); } });

It only generates a blank page in a new window. So I tried smaller DOM nodes like buttons, still no go. In the console it just shows <canvas width="142" height="45"></canvas> when I log 'canvas'. And opens a blank window. I removed the toBlob and SaveAs because even the html2canvas isn't working yet.

Ideas anyone? Scoping? Something else? I have seen in misc. threads that complex DOM sometimes creates issues for html2canvas although I would think WAB would be fine. And cross domain can be an issue. Maybe I need a proxy or something? But since it is local on node.js I thought that would not be it.

Re: Export the map to an image, client-side, for printing?

JeffPace — Fri, 22 May 2015 20:19:40 GMT

We do all of our page building client side (including pdf generation) but still use server side operations to generate the map. A couple reasons.

We still support older IE, which uses vml, so we cant go pure canvas.

We support non ESRI basemaps

www.mymanatee.org/gisapps/mobile/index.html

Printing is on the tools tab.

Re: Export the map to an image, client-side, for printing?

PamBond — Thu, 01 Oct 2015 16:11:44 GMT

I am trying to do the same thing - get a "screenshot" of my mapDiv. I have been messing around with html2canvas as well and I can successfully get a basemap image and graphics image but am not sure how to "layer" the graphics image over the basemap image. Here is the code I have so far:

$("btnSave").click(function(){

html2canvas($("#mapDiv"), {

"useCors": true, //to get basemap

onrenderer: function(canvas1) {

theCanvas = canvas1;

//convert and download as image

Canvas2Image.saveAsPNG(canvas1);

}

});

html2canvas($("#mapDiv"), {

"useCors": false, //to get overlying graphics

onrenderer: function(canvas2) {

theCanvas = canvas2;

//convert and download as image

Canvas2Image.saveAsPNG(canvas2);

}

});

})

Not sure how to now put canvas2 on top of canvas1 and create a new image.

Thanks in advance.

Re: Export the map to an image, client-side, for printing?

simoxu — Fri, 02 Oct 2015 01:49:20 GMT

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

http://mapiq.dfc.sa.gov.au

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.

Re: Export the map to an image, client-side, for printing?

RobertScheitlin__GISP — Fri, 02 Oct 2015 02:51:34 GMT

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.

Re: Export the map to an image, client-side, for printing?

simoxu — Fri, 02 Oct 2015 03:09:36 GMT

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.

Re: Export the map to an image, client-side, for printing?

JeffJacobson — Fri, 02 Oct 2015 16:03:48 GMT

I wrote a web application about a year ago that uses the HTML canvas to create a thumbnail image of a map.

WSDOT-GIS/arcgis-map-thumbnail-builder · GitHub

Re: Export the map to an image, client-side, for printing?

RobertScheitlin__GISP — Fri, 02 Oct 2015 16:12:12 GMT

Jeff,

How cross platform is this solution?

Re: Export the map to an image, client-side, for printing?

JeffJacobson — Fri, 02 Oct 2015 17:04:48 GMT

Everything is done client-side, so the only requirement is a modern web browser.

Re: Export the map to an image, client-side, for printing?

ChrisSmith7 — Mon, 05 Oct 2015 14:41:08 GMT

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.

Re: Export the map to an image, client-side, for printing?

Anonymous User — Tue, 06 Oct 2015 21:50:12 GMT

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

Re: Export the map to an image, client-side, for printing?

deleted-user-z9OjN-EoUVWn — Fri, 27 Jan 2017 17:22:05 GMT

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!