What is the alternative to take high resolution picture rather than take canvas screenshot

Questions
7

You can set the canvas size to whatever you like, render a frame, take a screenshot, then reset the size back to the original like this

function takeScreenshot( width, height ) {
    
    // set camera and renderer to desired screenshot dimension
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
    renderer.setSize(  width, height );
  
    renderer.render( scene, camera, null, false );

    const dataURL = renderer.domElement.toDataURL( 'image/png' );

    const iframe = `
      <iframe
        src="${dataURL}"
        frameborder="0"
        style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;"
        allowfullscreen>
      </iframe>`

    const win = window.open();
    win.document.open();
    win.document.write( iframe );
    win.document.close();

    // reset to old dimensions (cheat version)
    onWindowResize();
  
 }

See below for updated pen.

4 Likes