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

Questions
8

I found that with this method, there are problems downloading the image on Chrome (it’s difficult to save the image using right click or CTRL+S). I haven’t sound a good workaround, so instead I’ve switched to directly downloading the image which should work on all browsers. I’ve updated the pen, here are the new functions, mainly taken from mattdesl/threejs-app:

function dataURIToBlob( dataURI ) {
  const binStr = window.atob( dataURI.split( ',' )[1] );
  const len = binStr.length;
  const arr = new Uint8Array( len );
  for ( let i = 0; i < len; i++ ) {
    arr[i] = binStr.charCodeAt( i );
  }
  return new window.Blob( [arr] );
}

function saveDataURI( name, dataURI ) {
  const blob = dataURIToBlob( dataURI );

  // force download
  const link = document.createElement( 'a' );
  link.download = name;
  link.href = window.URL.createObjectURL( blob );
  link.onclick = () => {
    window.setTimeout( () => {
      window.URL.revokeObjectURL( blob );
      link.removeAttribute( 'href' );
    }, 500 );

  };
  link.click();
}

function defaultFileName (ext) {
  const str = `${new Date().toLocaleDateString()} at ${new Date().toLocaleTimeString()}${ext}`;
  return str.replace(/\//g, '-').replace(/:/g, '.');
}

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 DataURI = renderer.domElement.toDataURL( 'image/png' );

    // save
    saveDataURI(defaultFileName( '.png' ), DataURI);

    // reset to old dimensions by invoking the on window resize function
    onWindowResize();
  
 }

8 Likes