Send the image to server instead of triggering a browser file download

plotly.js
1

I’d like the top bar “Download plot as a png” button to send the image data to server (for example via Javascript fetch) instead of triggering a browser file download.

I see there are Plotly.toImage and Plotly.downloadImage that could be used, but how to redefine the standard “Download plot as a png” button to do that?

<script src="https://cdn.plot.ly/plotly-2.16.2.min.js"></script>
<div id="myDiv"></div>
<script>
Plotly.newPlot('myDiv', [{x: [1, 2, 3, 4], y: [10, 15, 13, 17], mode: 'markers'}]);
</script>
2

Hello @stamljf,

I think you’d have to capture the event where this is the target, then convert the figure to a stream for use with the fetch request.

You can probably take a look at the Js file to be able to see how they are converting it to a stream.

3

Thanks for your comment!

I think you’d have to capture the event where this is the target, then convert the figure to a stream for use with the fetch request.

Would you have an example? Which event should we capture? And how to get the figure image as PNG data? so that I can send it with XMLHttpRequest or fetch?

4

Sure thing,

So, you’d be looking for a click on the snapshot button, and then tackle it that way. Or you could create your own button to perform that same action.

Looking at the js code, it seems like it is something with the toImage function.