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

【问题标题】：Black image bug when exporting highcharts in Firefox在 Firefox 中导出 highcharts 时出现黑色图像错误
【发布时间】：2015-04-01 15:25:49
【问题描述】：

我正在使用 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 中它只是返回一个黑色图像。

有谁知道可能出了什么问题或遇到过类似的问题？

感谢您的帮助。

更新

我已经更新了代码，但现在没有图像附加到 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 的版本与 Chrome 不同。

更新

修复了黑色图像的问题。现在我正在努力解决如何返回多个图像 - 如何嵌套多个回调或者还有其他方法吗？示例：jsfiddle.net/wmuk489c/2

已解决

感谢您的帮助@RobertLangson。如果有人需要，fiddle 会更新最终工作代码：http://jsfiddle.net/wmuk489c/3/

其他问题：

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

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

【问题讨论】：

highcharts SVG 图表根<svg> 元素是否具有非百分比的宽度和高度属性？
是的 - 它们包含上面定义的固定宽度。这是
移动 doc.save('test.pdf');在内部回调中。
啊哈！那是票。感谢@RobertLongson 的帮助并忍受我的无能！ :-)

标签： javascript firefox svg highcharts jspdf

【解决方案1】：

设置 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.

【讨论】：