Clipping screenshot

Hello,
I’m taking screenshot (as .png) file. The output image has more blue color area and the actual image is occupying less area. I want the original image to occupy most of the area.
Can some one suggest how can I achieve it.

This is the image how I got using screenshot function

My desired output should be like the below image (I did this by cropping manually, but I’m looking if there is any functionality available for this).

TIA

On my reading of the docs, that function captures whatever the current canvas aspect ratio is, so you’ll either need to explicitly set the canvas size to create the aspect ratio you want, then position the camera so that the book fits snugly in frame, then take the screenshot … or explore the last option on that docs page - Specific resolution with screenshot.

Actually it looks like the method CreateScreenshotUsingRenderTarget gives you the option to specify height and width of rendered output, independent of current canvas size, so that should make it easy.

Here’s a PG I found that saves a screenshot of a specific size and also has a transparent background (clearColor.alpha = 0)

https://playground.babylonjs.com/#PN1NNI#258

1 Like

Thanks @inteja
In the images I attached in the question, i’ve used aspect ratio values {width:1080, height:1920} . But still seeing most of blue color area in the background (My requirement is to reduce the background size and increase the actual image size).
I’m sorry, i am not able to post PG link as I did it in my local and it has dependencies on my local files.

Just thinking it this way - Can we make use of boundingBoxes and clip.
I’m really not sure we can do that way or not, but just giving a thought.

Well that aspect ratio is wrong - it’s portrait but from your original post you need landscape. So swap height and width values, then as I said you’ll need to adjust your camera so book fits snugly in frame.

2 Likes