Javascript 使用html2canvas js库将图表（使用dc.js的内联图表）画布转换为PNG

我正在使用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");

}

---

}

试试这个也许会有帮助

$('#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.
    }
});

或

或

---

您可以使用替代方法，试试这个可能会有帮助

$('#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.
    }
});

或

或

---

您可以使用替代方法

在html2canvas包中有一个打开的bug。
我通过做一个小调整完成了这项工作，请在调用html2canvas之前添加这段代码：

const nodeList=document.queryselectoral（'.c3 chart line.c3 lines path'）；
const nodeList2=document.queryselectoral（“.c3轴路径”）；
const lineGraphPath=Array.from（节点列表）；
const axisPathArray=Array.from（nodeList2）；
forEach（函数（元素：HTMLElement）{
如果（element.style.fill==''）{
element.style.fill='none'；
}
});
forEach（函数（元素：HTMLElement）{
如果（element.style.fill==''）{
element.style.fill='none'；
element.style.stroke='#000'；
}
})

html2canvas包中有一个开放的bug。
我通过做一个小调整完成了这项工作，请在调用html2canvas之前添加这段代码：

const nodeList=document.queryselectoral（'.c3 chart line.c3 lines path'）；
const nodeList2=document.queryselectoral（“.c3轴路径”）；
const lineGraphPath=Array.from（节点列表）；
const axisPathArray=Array.from（nodeList2）；
forEach（函数（元素：HTMLElement）{
如果（element.style.fill==''）{
element.style.fill='none'；
}
});
forEach（函数（元素：HTMLElement）{
如果（element.style.fill==''）{
element.style.fill='none'；
element.style.stroke='#000'；
}
})

更新图表css并重试。我们尝试使用css，但不起作用。将html代码粘贴到此处我们在将图表转换为png时遇到问题，否则图表将正常运行。看起来来自

dc.css

的css丢失了-我听说提取/导出SVG时经常出现问题。如果您可以找到一种方法来内联样式，或者将它们直接应用于SVG元素，这可能会有帮助。请更新图表css并重试。我们尝试使用css，但不起作用。将html代码粘贴到此处我们在将图表转换为png时遇到问题，否则图表将正常运行。看起来来自

dc.css

的css丢失了-我听说提取/导出SVG时经常会出现问题。如果您可以找到一种方法来内联样式，或者将它们直接应用于SVG元素，这可能会有所帮助。我已经尝试了此代码，但折线图绘制不正确。我已经尝试了此代码，但折线图绘制不正确。