After implementing the following code...
(1) I successfully saved regular rendered THREE.js scenes as .jpg files;
(2) Additionally, I managed to utilize CSS2DRenderer to display CSS2D labels on top of the canvas;
(3) Now, my goal is to save the image with CSS2DRenderer-rendered overlay as a separate .jpg file;
However, I encountered an error:
TypeError: labelRenderer.domElement.toDataURL is not a functionI'm starting to think that exporting from CSS2D might not be feasible?
(4) Ideally, I aim to save the combined onscreen image (ordinary and CSS2D overlay) as a single .jpg file.
Here's the code snippet:
// GLOBALS
// INITIATION
var MyContainer = document.getElementById( "for_3JS" );
MyContainer.innerHTML = "";
renderer = new THREE.WebGLRenderer( {antialias:true , preserveDrawingBuffer: true} );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( wwww, hhhh );
MyContainer.appendChild( renderer.domElement );
var labelRenderer = new CSS2DRenderer();
labelRenderer.setSize( wwww, hhhh );
labelRenderer.domElement.style.position = 'absolute';
labelRenderer.domElement.style.top = 0;
MyContainer.appendChild( labelRenderer.domElement );
// ANIMATION & RENDERING
renderer.render ( scene, camera );
labelRenderer.render( scene, camera );
// ONCLICK
var strMime = "image/jpg";
//... THIS WORKS OK (but NO LABELS):-
var imgDataA = renderer.domElement.toDataURL( strMime );
//... THIS FAILS with:- TypeError: labelRenderer.domElement.toDataURL is not a function.
var imgDataB = labelRenderer.domElement.toDataURL( strMime );
//... save as file (imgDataA only at present).
var fileURL = imgDataA;//imgDataB
//...from http://muaz-khan.blogspot.co.uk/2012/10/save-files-on-disk-using-javascript-or.html
var Fsave = document.createElement('a'); //... creates an html <a> anchor object.
document.body.appendChild( Fsave ); //... for Firefox, not needed in Opera (?)
Fsave.style = "display: none";
Fsave.href = fileURL;
Fsave.target = '_blank';
Fsave.download = filename || 'unknown';
Fsave.click();
document.body.removeChild( Fsave );