Question

我希望从WebGL div中保存PNG比特流。

3DMol查看器具有将WebGL视图转换为PNG的功能。

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

以字节为单位返回PNG。如何捕获并保存到文件？

单击按钮以查看功能执行。

＆＃13;

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');
});

＆＃13;

.mol-container {
  width: 60%;
  height: 400px;
  position: relative;
}

＆＃13;

<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>

＆＃13;

将JavaScript生成的PNG保存到磁盘

0 个答案: