Save composer frame to jpg

I have used this code to save the current frame from the Renderer to a jpg:

        var screenshot = renderer.domElement.toDataURL("image/jpeg");
        var tmpLink = document.createElement('a');
        var today = new Date();
        var date = today.getDate() + '-' + (today.getMonth() + 1) + '-' + today.getFullYear();
        var time = today.getHours() + "-" + today.getMinutes() + "-" + today.getSeconds();
        var dateTime = date + '_' + time;
        tmpLink.download = title + '_' + dateTime + '.jpg'; // set the name of the download file 
        tmpLink.href = screenshot;
        tmpLink.type = "image/jpeg";

        // temporarily add link to body and initiate the download  
        document.body.appendChild(tmpLink);
        tmpLink.click();
        document.body.removeChild(tmpLink);

But now i use the composer to add some effects and with the code above i get the frame without this effects. How do i get the frame from the composer?

I’ve enhanced one of the official post-processing examples with a screenshot functionality. It works as expected: Live demo

Read the following thread at stackoverflow for more details:

1 Like

Thank you i found my problem. It is not the saving process.

My problem is that i need a white background. I need to set my background to transparent 100% to get the OutlinePass im using working correct but saving this to jpg is creating a black background since the alpha get stripped out.

So the new question is how to add a pass to the effect composer to replace the transparent background with a white background.

You would need an additional shader pass that converts transparent to white. At least in the official repository there is not predefined shader or post-processing pass that could be used for this.

Maybe it’s easier to try to use the OutlinePass without making the canvas transparent (meaning not setting alpha to true when creating the renderer). The problem is that the outline is blended additively onto the beauty pass. So white background will also produce a white outline. You could try to change the blending of the overlay material to THREE.NormalBlending and see how it goes.

I have tried NormalBlending bevor using a transparent background and NormalBlending result into this image:

not so nice blending :frowning:

since creating a own shader is far beyond my skills i found a workaround with a second canvas:

        var webgl = webglRenderer.domElement.toDataURL("image/png");
        var img = document.createElement('img');
        img.onload = function () {
            var canvas = document.createElement('canvas');
            canvas.height = webglRenderer.domElement.height;
            canvas.width = webglRenderer.domElement.width;
            
            var ctx = canvas.getContext("2d");
            ctx.fillStyle = "white";
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

            var screenshot = canvas.toDataURL("image/jpeg");
            var tmpLink = document.createElement('a');
            var today = new Date();
            var date = today.getDate() + '-' + (today.getMonth() + 1) + '-' + today.getFullYear();
            var time = today.getHours() + "-" + today.getMinutes() + "-" + today.getSeconds();
            var dateTime = date + '_' + time;
            tmpLink.download = title + '_' + dateTime + '.jpg'; // set the name of the download file 
            tmpLink.href = screenshot;

            tmpLink.type = "image/jpeg";

            // temporarily add link to body and initiate the download  
            document.body.appendChild(tmpLink);
            tmpLink.click();
            document.body.removeChild(tmpLink);
        };
        img.src = webgl;