在 Firefox 中导出高图时出现黑色图像错误
Black image bug when exporting highcharts in 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 中它只是 return 一个黑色图像。
有谁知道可能出了什么问题或遇到过类似问题?
感谢您的帮助。
更新
我已经更新了代码,但现在在 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 不同。
更新
解决了黑色图像的问题。现在我正在为如何 return 多个图像而苦恼 - 如何嵌套多个回调或者有其他方法吗?
示例: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 浏览器。
我正在使用 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 中它只是 return 一个黑色图像。
有谁知道可能出了什么问题或遇到过类似问题?
感谢您的帮助。
更新
我已经更新了代码,但现在在 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 不同。
更新
解决了黑色图像的问题。现在我正在为如何 return 多个图像而苦恼 - 如何嵌套多个回调或者有其他方法吗? 示例: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 浏览器。