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?
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.
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;