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

Black image bug when exporting highcharts in Firefox

本文关键字：黑色 图像 错误 高图表 Firefox      更新时间：2023-09-26

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

有人知道可能出了什么问题，或者见过类似的问题吗？

谢谢你的帮助。

更新

我已经更新了代码，但现在无论是在Chrome还是Firefox中，pdf文档都没有附加任何图像。

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不同。

更新

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

已解决

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

其他问题：

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

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

设置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浏览器逃脱了惩罚。

这是你修好的小提琴。

相关文章：