How should I use ScreenshotTools Create Screenshot With Resize Async()?

Questions
1

The API ScreenshotTools.CreateScreenshotWithResizeAsync() returns a Promise
How do you get the screenshot image using this API?

Thanks,
Michael

2

Hi there!
CreateScreenshotWithResizeAsync() will force a download of the image without exposing it to the developer. Admittedly, this is not clear. I’ll update the documentation after this.

To get the image data, use CreateScreenshotAsync instead, which returns the screenshot as a string of base64-encoded characters. You can still pass in a size parameter for the resize.

3

If my canvas is horizontal, and I want a vertical screenshot that fills a vertical frame, do I need to resize the canvas before I take the screenshot? I found that if I pass a vertical size to this API with a horizontal canvas, an image with transparent pixels at the top and bottom will be created. Is there a recommended procedure to use if I don’t want the blank space, but I want the picture to be filled with the screenshot image?

4

Yes, to use this you’d have to resize the canvas before taking the screenshot to get rid of the empty space. You could do something like this PG (which could probably be simplified further, but just for demo).

5

That works unless I use the WebGPUEngine() where the image is created but it is all white.
Is there a setting with the WebGPU engine that allows screenshots?
is this related?

6

hello there

i’m creating an app that used in desktop and mobile devises

for saving project I need to save some screen shot
this is how I do it

	return new Promise((resolve) => {
		const { engine, camera, scene } = Editor.GetInstance();

		const width = 383;
		const height = 223;

		const canvas = engine.getRenderingCanvas()!;
		canvas.style.width = width + "px";
		canvas.style.height = height + "px";
		engine.resize();

		const sceneLastActiveCamera = scene.activeCamera;

		scene.onBeforeRenderObservable.addOnce(() => {
			scene.activeCamera = camera.screenShootCamera;
		});

		scene.onAfterRenderCameraObservable.addOnce(() => {
			Tools.CreateScreenshot(
				engine,
				camera.screenShootCamera,
				{
					width,
					height,
					precision: 1.0,
				},
				(data) => {
					resolve(data as string);
				},
			);
		});
		scene.activeCamera = sceneLastActiveCamera;
		canvas.style.removeProperty("width");
		canvas.style.removeProperty("height");
		engine.resize();
	});

you can set screen width and height
I create another camera for screen shots
just for fixed camera and same result in all clients
no matter where clients are looking

3 Likes
7

Very clever solution! Thanks for sharing! @alexchuber would you please consider to add this code snippet to the docs as well? Thanks!

1 Like
8

Sorry, I dug a bit further on this, since resizing the canvas before taking a screenshot seems like a lot of unnecessary overhead for users :slight_smile:

To preserve back compat, I’m thinking to add an optional parameter useFill, which will fill the given size dimension of the screenshot with the rendering canvas (as opposed to its current behavior, which letterboxes the rendering canvas.) Add useFill parameter to CreateScreenshot by alexchuber · Pull Request #16013 · BabylonJS/Babylon.js · GitHub

This should also circumvent the WebGPU issues that crop up with resizing the canvas.

2 Likes