search

MaayanLab / react-scatter-board

A reusable React library for interactive THREE.js 2d/3d scatter plots
https://maayanlab.github.io/react-scatter-board/
9 stars 3 forks source link

Allow plot to be downloadable as PNG format #9

Closed jchpan closed 2 years ago

jchpan commented 2 years ago

I put the small demo code below, and I attached the actual outlook of react scatter plot that might look like, which has a blue "download" button that we can clicked.

IMG_0470

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>

<a download="new-image.png" id="download">Download</a>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

var canvas = document.getElementById('myCanvas');
var button = document.getElementById('download');
button.setAttribute( 'href', canvas.toDataURL('image/png', 1) )
</script> 

</body>
</html>
u8sand commented 2 years ago

Please note that v2.1 branch has this feature as of 9fa7d81c3f3804efbb2acc6d4194e6b4dcf7a3e0