情节"toImage"：将图像发送到服务器，而不是触发浏览器文件下载

Question

我希望顶部栏"下载图作为一个png">按钮发送图像数据到服务器(例如通过Javascriptfetch)，而不是触发浏览器文件下载。

我看到有Plotly.toImage和Plotly.downloadImage可以使用，但如何重新定义标准的"下载图"为png";按钮?

Plotly.newPlot('myDiv', [{x: [1, 2, 3, 4], y: [10, 15, 13, 17], mode: 'markers'}]);

<script src="https://cdn.plot.ly/plotly-2.16.2.min.js"></script>
<div id="myDiv"></div>

Answer 1

解决方案:如何将标准的"下载图"重新定义为png"按钮?

请查看此代码片段。图像保存按钮已被删除，并添加了自定义发送图像按钮。按钮将获取base64格式的图像。如何发送图像由您决定。

以下部分的官方plot .js文档作为参考:

• 添加按钮到模型栏:https://plotly.com/javascript/configuration-options/#add-buttons-to-modebar
• 删除模式栏按钮:https://plotly.com/javascript/configuration-options/#remove-modebar-buttons
• 静态图像导出:https://plotly.com/javascript/static-image-export/

const layout = {}
const btnCapture = {
name: 'send image',
icon: Plotly.Icons.camera,
direction: 'up',
click: async(gd) => {
const imgBase64 = await Plotly.toImage(gd, {
width: 300,
height: 300
})
console.log('do something with image', imgBase64)
console.log(Plotly.Icons)
}
}
const config = {
modeBarButtonsToAdd: [btnCapture],
modeBarButtonsToRemove: ['toImage']
}

Plotly.newPlot('myDiv', [{
x: [1, 2, 3, 4],
y: [10, 15, 13, 17],
mode: 'markers',
}], layout, config)

<script src="https://cdn.plot.ly/plotly-2.16.2.min.js"></script>
<div id="myDiv"></div>