DotNet HighCharts PNG图像

Question

我在导出图表列表时添加了一个新按钮

Highcharts.getOptions().exporting.buttons.contextButton.menuItems.push({
                text: 'Add Issue ',
                onclick: function () {
                    this.AddIssue();
                }
            });

当我点击 AddIssue 按钮时，我想在同一页面的 img 标签中添加图表的屏幕截图，

Highcharts.Chart.prototype.AddIssue = function () {
 ....
 $('#mock').attr('src', .........);
}

我有一个img标签

<img id="mock" src="../" />

我尝试使用 getSVG 函数，但我希望它是 PNG 或 JPEG 图像而不是 SVG。

AddIssue 函数内部

 var svg = this.getSVG();                 
 var base_image = new Image();
 var Isvg = "data:image/svg+xml," + svg;
 base_image.src = Isvg;

Answer 1

您可以通过 HTML canvas 将 SVG 从 getSVG 方法转换为 PNG：

  load: function() {
    var chart = this,
      svg;

    $('#btn').on('click', function() {
      svg = chart.getSVG();

      var canvas = document.createElement('canvas');
      canvas.width = chart.chartWidth;
      canvas.height = chart.chartHeight;

      var ctx = canvas.getContext('2d');
      var img = document.createElement('img');

      img.onload = function() {
        ctx.drawImage(img, 0, 0);
        canvas.toDataURL('image/png');
      };

      img.setAttribute('src', 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svg))));
    });
  }

现场演示：http://jsfiddle.net/BlackLabel/3azfr1nL/

其他解决方案可以在这里找到：https://ourcodeworld.com/articles/read/15/3-ways-to-export-highcharts-charts-to-image-with-javascript-client-side-solution-

这里：https://gist.github.com/philfreo/0a4d899de4257e08a000