在Firefox中导出highcharts时出现黑色图像错误

我使用highcharts在显示正常的网页上显示多个图形。在Firefox中导出highcharts时出现黑色图像错误

我有一个导出功能，试图将图表组合成pdf。我得到图表的svg并将其转换为jpeg图像，以包含在由jsPDF创建的pdf中。

这里是我用来生成图像代码：

if ($('.chart').length > 0) { 
    var chartSVG = $('.chart').highcharts().getSVG(), 
     chartImg = new Image(); 

    chartImg.src = "data:image/svg+xml;base64," + window.btoa(unescape(encodeURIComponent(chartSVG))); 

    var chartCanvas = document.createElement("canvas"); 

    chartCanvas.width = 600; 
    chartCanvas.height = 400; 
    chartCanvas.getContext("2d").drawImage(chartImg, 0, 0, 600, 400); 

    var chartImgData = chartCanvas.toDataURL("image/jpeg"); 
}

这完全适用于Chrome，但在Firefox它只是返回黑色图像。

有谁知道什么可能会出错或已经看到类似的问题？

感谢您的帮助。

UPDATE

我已经更新了代码，但现在没有图像被追加到PDF文档，无论是在Chrome或Firefox。

if ($('.sales').length > 0) { 
     var chartSVG = $('.sales').highcharts().getSVG(), 
      chartImg = new Image(); 

     chartImg.onload = function() { 
      var chartCanvas = document.createElement("canvas"); 

      chartCanvas.width = 600; 
      chartCanvas.height = 400; 
      chartCanvas.getContext("2d").drawImage(chartImg, 0, 0, 600, 400); 

      var chartImgData = chartCanvas.toDataURL("image/jpeg"); 
     } 

     chartImg.src = "data:image/svg+xml;base64," + window.btoa(unescape(encodeURIComponent(chartSVG))); 
    }

不知道我是否在正确的地方有代码。

如果我将'chartImgData'登录到控制台，两个浏览器都会生成dataURI，但Firefox的版本与Chromes不同。

UPDATE

修正了黑色图像的问题。现在，我正在努力如何返回多个图像 - 如何嵌套多个回调或有另一种方式？例子：jsfiddle.net/wmuk489c/2

解决

感谢您的帮助@RobertLangson。拨弄着最后的工作代码更新应该有人需要它：http://jsfiddle.net/wmuk489c/3/

进一步的问题：

我的图表是动态的，因此可能并不总是存在。我需要从每个存在的图形中获取图像。如果图表不存在，则'getSVG'函数失败，请参阅示例：http://jsfiddle.net/wmuk489c/4/

如果图表不存在，img.onload应该如何工作？回调中的第一张图也许不存在，那么这将如何工作？有没有更好的方式来获取图像？

来源

2015-04-01 Wiggy

highcharts SVG图表根' 2015-04-01 15:29:45

是 - 它们包含上面定义的固定宽度。这里是 Wiggy 2015-04-01 15:42:13

移动doc.save（'test.pdf'）;在内部回调中。 – 2015-04-02 09:56:27

设置chartImg.src导致异步加载，所以你这时就需要做到这一点...

chartImg.onload = function() { 
    var chartCanvas = document.createElement("canvas"); 

    chartCanvas.width = 600; 
    chartCanvas.height = 400; 
    chartCanvas.getContext("2d").drawImage(chartImg, 0, 0, 600, 400); 

    var chartImgData = chartCanvas.toDataURL("image/jpeg"); 

    doc.addImage(chartImgData, 'JPEG', 0, 0, 200, 100); 

    // You can only do this bit after you've added the image so it needs 
    // to be in the callback too 
    doc.save('test.pdf'); 

} 

chartImg.src = ...

您已经竞争条件，否则，我想像你只是碰巧与Chrome浏览器摆脱它浏览器在你的电脑上。

Here's your fiddle fixed。

来源

2015-04-01 15:51:46

在Firefox中导出highcharts时出现黑色图像错误

回答

相关问题