Take screenshot of cesium map including custom infobox

CesiumJS
1

Hi everyone,
I have a cesium application where I have rendered osm buildings, 3dtiles, etc.
I have created a custom infobox for my 3dtiles. I have also created a print button to take a screenshot of the map including infobox. I can take screenshots but infobox is not coming.

output:

image
image1896×755 183 KB

Expected output:

image
image1897×752 167 KB

Can anyone help me?

Thanks in advance.

2

Hi @Masum_Billah

Could you share the code that you’re using to take the screenshot, preferably as a Sandcastle?

Thanks,
Sam.

3

Hi @sanjeetsuhag
Thanks for your response.
Here is the code that I am using to take screenshot.

  viewer.render();
  var image = viewer.canvas.toDataURL();
  var aLink = document.createElement("a");
  aLink.download = "map.png";
  aLink.href = image;
  aLink.click();
4

Hi @Masum_Billah

Thanks for sharing your code. The code you are using will only capture the contents of the WebGL canvas i.e. the CesiumJS scene, and not any DOM elements on top of the canvas, like the infobox. I believe you’ll have to use your browser or operation systems’s screenshot tools to capture both the canvas and the DOM elements.

Sam.

5

i tried using htmltocanvas and dom to png library with npm to do so.But unfortunately nothing worked . only thing that is displaying is dynamic text and black screen map component. Even using googlechrome browser app to take screenshot but this also not working.

My tech stack is NextJs and TailWind