Alpha channel for canvas Screenshot

Questions
, ,
1

I’m defining my render as such:
var renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, preserveDrawingBuffer: true });
and getting current canvas screenshot like this:
renderer.domElement.toDataURL("image/jpeg", 1.0);
I do not have anything on my scene beside my GLTF model and the canvas background is opacity.
(If I’m changing the background css property of my body tag I see the deference with no problem)

But the image that gets returned fro the toDataURL function has an image with black background.

Any idea on how to get an image with alpha channel instead of the black background?

2

Hi @ranbuch, you need to export to png instead of jpeg. Jpeg does not have transparency.

2 Likes
3

Thank you for your answer.

This does solve my problem :slight_smile:

2 Likes