Я работаю с 3D-графиком реактивной силы. График является интерактивным (например, может быть увеличен). Я хочу поместить кнопку HTML, нажав на которую текущая сцена графика может быть сохранена в виде png на стороне клиента. Вот мой код:
`<!DOCTYPE html>
<html>
<head>
<script src="//unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="//unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="//unpkg.com/babel-standalone"></script>
<script src="//unpkg.com/react-force-graph-3d"></script>
</head>
<body>
<div id="3d-graph" ></div>
<script type="text/jsx">
fetch("blocks.json").then(res => res.json()).then(data => {
class FocusGraph extends React.Component {
_handleClick = node => {
// Aim at node from outside it
const distance = 40;
const distRatio = 1 + distance/Math.hypot(node.x, node.y, node.z);
this.fg.cameraPosition(
{ x: node.x * distRatio, y: node.y * distRatio, z: node.z * distRatio }, // new position
node, // lookAt ({ x, y, z })
3000 // ms transition duration
);
};
render() {
return <ForceGraph3D
ref={el => { this.fg = el; }}
graphData={data}
/>;
}
}
ReactDOM.render(
<FocusGraph />,
document.getElementById('3d-graph')
);
});
</script>
<div id="bottom" style="display:inline"><p align ="bottom" style="position:absolute;bottom:0px;right:10px;align:right"><button id="save" >Save graph as png </button></p></div>
</body>
</html>