在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時出現黑色圖像錯誤

回答

相關問題