Screenshot about 3d-force-graph HOT 9 CLOSED

Right, you code isn't selecting a canvas. Change download to this:

function download(){
  if(downloads){
    cancelAnimationFrame(a);
  } else {
    $('#3d-graph canvas')[0].toBlob(function(blob){ //See? Select a canvas, not the div that wraps it.
      console.log(blob);
      saveAs(blob, 'a.png');
    });
  }
}

from 3d-force-graph.

@AABoyles Thanks a lot for pointing out my mistake. It is working now. Thanks again.

from 3d-force-graph.

@mhebrard renderer.domElement simply returns the canvas DOM element, so assuming you're getting the canvas element that is controlled by 3d-force-graph with $('canvas')[0], the two instructions should actually be equivalent.

If you're getting an empty image, could it be a timing issue? You'd need to wait until the objects are actually rendered on the canvas before taking the png screenshot.

The background color/transparency can already be set by doing something like: .backgroundColor('rgba(0,0,0,0)').

Let me know if you're able to get it working.

from 3d-force-graph.

Oh I see...
Thanks for the reply... I will test that and let you know

from 3d-force-graph.

I just spent a ton of time on this, and I think I've got a working hack.

var a, downloads = 0;

//This can be any event. I've got an export button:
$('#3d_network_export').click(function(){
  downloads = 0;
  //Calling this kicks off a loop that repeatedly calls the passed function.
  a = requestAnimationFrame(download);
});

function download(){
  //So we don't call this function a bunch of times, let's cancel the loop after the first
  if(downloads){
    cancelAnimationFrame(a);
  } else {
    //Obviously, you should swap this out for a selector that gets only the 3D graph
    $('#3d-network canvas')[0].toBlob(function(blob){
      //Powered by [FileSaver](https://github.com/eligrey/FileSaver.js/)
      saveAs(blob, 'a.png');
    });
  }
}

This cannot be the right way to accomplish this, but it seems to work.

from 3d-force-graph.

@AABoyles It is not working for me. It shows console error
Uncaught TypeError: $(...)[0].toBlob is not a function at download

from 3d-force-graph.

@nupurbiswas Just sanity checking, here--is your selector (the ... in your console error) actually selecting a canvas? toBlob is a method of canvas elements.

from 3d-force-graph.

@AABoyles I have used your code and here it is. It is not working for me.

  <div id="3d-graph" ></div>
 <script>
 const elem = document.getElementById('3d-graph');
 const Graph = ForceGraph3D()(elem)
 .width(300)
 .height(300)
 .backgroundColor('grey')
  .jsonUrl('blocks.json')
  </script>
  <div id="savebutton" ><button>Save graph as png </button</div>
 <script>
  var a, downloads = 0;
   $('#savebutton').click(function(){
  downloads = 0;
   a = requestAnimationFrame(download);
 });

function download(){
 if(downloads){
 cancelAnimationFrame(a);
 } else {
 $('#3d-graph')[0].toBlob(function(blob){
    console.log(blob);      
  saveAs(blob, 'a.png');
   });
 }
 }
 </script>

from 3d-force-graph.

requestAnimationFrame is useful

from 3d-force-graph.