After attempting to save an image from a three.js WebGl render, I am encountering an issue where the saved image appears completely blank, despite returning a string of characters:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAK8AAADICAYAAACeY7GXAAADt0lEQ…IF4M2+znB4GcgWgDf7OsPhZSBbAN7s6wyHl4FsAXizrzP8AS/TAMmecuTCAAAAAElFTkSuQmCC
My code includes setting preserveDrawingBuffer to true:
renderer = new THREE.WebGLRenderer( {
alpha: true,
antialias: true,
preserveDrawingBuffer: true
} );
Here is the section where toDataUrl is called:
var getImageData = false;
function render() {
camera.lookAt( scene.position );
renderer.render( scene, camera );
if(getImageData == true){
imgData = renderer.domElement.toDataURL("image/png");
window.setTimeout(10);
console.log(imgData);
getImageData = false;
}
requestAnimationFrame(render);
}
getImageData = true;
Additionally, here is a snapshot of the canvas before being rendered to an image:
Canvas https://i.sstatic.net/b88NM.png
CanvasCode
<canvas width="175" height="200" style="width: 175px; height: 200px"></canvas>
If anyone has any insights or suggestions as to why the saved image turns out blank despite these settings, I would greatly appreciate the assistance. The render() function is located at the end of the code.