Community

Export Vector Tiles as screenshot using canvas.todataURL ()

1181
3
03-18-2020 07:59 AM
FabienAncelin
by
New Contributor II
‎03-18-2020 07:59 AM

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

Preview file
94 KB
Preview file
1501 KB
0 Kudos
3 Replies
Noah-Sager
by Esri Regular Contributor
Esri Regular Contributor
‎03-23-2020 11:22 AM

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

 

0 Kudos
FabienAncelin
by
New Contributor II
‎03-23-2020 12:42 PM

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.

0 Kudos
Noah-Sager
by Esri Regular Contributor
Esri Regular Contributor
‎03-23-2020 02:43 PM

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 

0 Kudos