使用html2canvas js库将图表（使用dc.js的内嵌图表）转换为PNG

Question

我使用html2canvas库版本0.5.0-beta3将dc.js折线图转换为png图像。但图像看起来如附图所示。有没有解决方案来删除折线图图像中的黑色填充。请建议任何更好的图书馆来实现同样的目标。

我们正在尝试的代码是

html2canvas($("#dashboard-image"), {
                background :'#FFFFFF ',
                onrendered: function(canvas) {
                    // restore the old offscreen position

                    var img = canvas.toDataURL("image/png");

} }

Answer 1

尝试这可能有帮助，

$('#dashboard-image').html2canvas({
    onrendered : function(canvas) {
      var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");  // here is the most important part because if you dont replace you will get a DOM 18 exception.
    }
});

OR

html2canvas($("#dashboard-image"), {
                background :'#FFFFFF ',
                onrendered: function(canvas) {
                    var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
}};

OR  您可以使用替代option

Answer 2

html2canvas软件包中存在一个打开的错误。
我是通过做一些小的调整来完成这项工作的，请在调用html2canvas之前添加以下代码：

const nodeList = document.querySelectorAll('.c3-chart-line .c3-lines path');
const nodeList2 = document.querySelectorAll('.c3-axis path');
const lineGraphPath = Array.from(nodeList);
const axisPathArray = Array.from(nodeList2);
lineGraphPath.forEach(function(element: HTMLElement){
    if (element.style.fill === '') {
        element.style.fill = 'none';
    }
});
axisPathArray.forEach(function(element: HTMLElement){
if (element.style.fill === '') {
        element.style.fill = 'none';
        element.style.stroke = '#000';
    }
})