0

I am looking to save a PNG bitstream from a WebGL div.

The 3DMol viewer has a function that converts a WebGL view to PNG. 

http://3dmol.csb.pitt.edu/doc/$3Dmol.GLViewer.html#png

It returns the PNG in bytes. How can I capture it and save to a file?

Click on the button to see the function perform.

let container = jQuery("#container-01");
let config = {backgroundColor: 'white'};
let theViewer = $3Dmol.createViewer(container, config);

$3Dmol.download("pdb:1DFJ", theViewer, {multimodel: true, frames: true}, function () {
            theViewer.setStyle({}, {cartoon: {color: "spectrum"}});
            theViewer.zoomTo();
            theViewer.render();
            
    }
);

$('#pngClick').click(function(){
  theViewer.pngURI();
  console.log('Clicked');
});
.mol-container {
  width: 60%;
  height: 400px;
  position: relative;
}
<html>
  <head>
    <script src="http://3Dmol.csb.pitt.edu/build/3Dmol-min.js"></script>
  </head>
  <body>
    <button id="pngClick">PNG</button>
    <div id="container-01" class="mol-container"/>

  </body>
</html>
gman
  • 100,619
  • 31
  • 269
  • 393
El Dude
  • 5,328
  • 11
  • 54
  • 101
  • It seems like this question has been answered http://stackoverflow.com/questions/11112321/how-to-save-canvas-as-png-image, http://stackoverflow.com/questions/15811897/how-to-save-a-canvas-with-image-to-a-png-file?rq=1, http://stackoverflow.com/questions/25215555/how-to-save-an-html5-canvas-to-a-png?rq=1, http://stackoverflow.com/questions/3906142/how-to-save-a-png-from-javascript-variable, http://stackoverflow.com/questions/10673122/how-to-save-canvas-as-an-image-with-canvas-todataurl?rq=1, https://www.google.com/search?q=save+canvas+to+file+stackoverflow.com – gman May 04 '17 at 01:08
  • Thank you,maybe I was like looking for the wrong keywords before – El Dude May 04 '17 at 02:46
  • No problem. It's probably because `canvas` is not mentioned in your question. – gman May 04 '17 at 03:28

0 Answers0