topic Export Vector Tiles as screenshot using canvas.todataURL () in ArcGIS JavaScript Maps SDK Questions

Export Vector Tiles as screenshot using canvas.todataURL ()

FabienAncelin — Wed, 18 Mar 2020 14:59:28 GMT

Hello GIS community.

I am developing a Web App Builder widget that can take a screenshot of the entire WAB application (this is why the Print widget is not used). I am using HTML2Canvas.js so far and it works great with Raster basemaps, and Feature layers. Vector Tiles do not seem to be rendered.

As a matter of fact, even if I can canvas.toDataURL() on the cavas generated by WAB to represent the vector tile, I only get a transparent image. I know the 4.x API has a takeScreenshot method on a MapView, so I was expecting doing a screenshot of the Vectory Tiles to be an easy win.

Does anybody know why the canvas generated by Vectory tiles can not be exported? Is there some CORS resources there that are tainting the cavas? In that case, how would the MapView.takeScreenshot work in the 4.x API.

Kind regards,

Fabien

Re: Export Vector Tiles as screenshot using canvas.todataURL ()

Noah-Sager — Mon, 23 Mar 2020 18:22:17 GMT

Hi Fabien, sorry to hear about the trouble with HTML2Canvas.js. I think the takeScreenshot() method targets an off-screen surface from which you can read the image back. Perhaps this helps with VectorTileLayers. Is there a reason why you can't use the takeScreenshot() method for the custom widget?

Ryan Libed‌ wrote a great blog about using HTML2Canvas and the takeScreenshot() method, which might be helpful:https://community.esri.com/people/RLibed-esristaff/blog/2018/12/20/screenshots-with-the-arcgis-api-for-javascript-html2canvas

Re: Export Vector Tiles as screenshot using canvas.todataURL ()

FabienAncelin — Mon, 23 Mar 2020 19:42:26 GMT

Hi Noah,

I know screenshots can be tricky when the elements from the web page come from multiple site, so I am not frustrated by the API so far. I just want to make sure I am not missing anything. I am a skilled developer, but by no mean a web development expert. So I am wondering if I am missing something obvious.

The main reason I cannot use the take screenshot is that I am working in 2D with Web App Builder. Since the takeScreenshot is a method on the MapView or SceneView in the 4.x APIs only, I won't be able to use this method, since Web App Builder 2D widgets are using our 3.x API.

The blog article you mentioned is fantastic, but those examples do work with the 4.x API. Which means they are out of reach for me since the client requirement is that the widget has to work within WAB and 2D application.

Am I correct or am I missing something here?

Thanks for your feedback.

Re: Export Vector Tiles as screenshot using canvas.todataURL ()

Noah-Sager — Mon, 23 Mar 2020 21:43:33 GMT

Ah, I should have caught that from the initial description. Thank you for reiterating that you are working with the 3x version of the JS API. No, unfortunately, I don't think you're missing anything. I will report back here if I find something else to share. In the meantime, you might have more luck reaching developers who have experienced a similar issue in these other spaces:

Web AppBuilder for ArcGIS

https://community.esri.com/groups/web-app-builder-custom-widgets