javascript 巧妙地“至图像”:将图像发送到服务器而不是触发浏览器文件下载

p4tfgftt  于 2022-12-21  发布在  Java
关注(0)|答案(1)|浏览(147)
    • bounty将在5天后过期**。回答此问题可获得+100的声誉奖励。Basj正在寻找规范答案

我希望顶栏 "Download plot as a png" 按钮将图像数据发送到服务器(例如,通过Javascript fetch),而不是触发浏览器文件下载。
我看到有Plotly.toImagePlotly.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>
bfnvny8b

bfnvny8b1#

溶液:如何重新定义标准的"下载图为png"按钮来做到这一点?

请检查这个代码段。图像保存按钮已被删除,并添加了一个自定义发送图像按钮。该按钮将获得图像作为base64。这是由你如何发送图像。
参考plotly.js官方文档的以下部分:

  • add buttons to modebar: https://plotly.com/javascript/configuration-options/#add-buttons-to-modebar
  • remove modebar buttons: 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>

相关问题