使用c3.js将SVG转换为CANVAS,PNG和JPEG

Question

我正在尝试将svg图表转换为png和jpeg格式以便下载图表.但是,我没有得到相同的图片.有人能告诉我为什么我会出现黑屏.任何帮助将不胜感激.谢谢

这是屏幕.

http://i.stack.imgur.com/0zdvX.png 屏幕

Answer 1

我假设你使用像html2canvas http://html2canvas.hertzen.com这样的库来将C3 SVG转换为画布然后转换为PNG/JPEG

对于html2canvas,来自http://html2canvas.hertzen.com/documentation.html

因此,它只能正确呈现它理解的属性,这意味着有许多CSS属性不起作用.

使用相同方法的其他库可能有类似的差距.

修正C3.js + html2canvas的黑色背景和粗线

假设您正在使用html2canvas,以下代码块将纠正您看到的黑色填充和粗轴问题

// c3 chart generation code
....


// set the properties that html2canvas does not recognize / assumes wrongly in a way that it does / explicitly
d3.selectAll('#chart *').each(function (e) {
    if (d3.select(this).style('fill-opacity') == 0)
        d3.select(this).style('opacity', 0);
    d3.select(this).style('fill', d3.select(this).style('fill'));
    d3.select(this).style('stroke', d3.select(this).style('stroke'));
});
d3.selectAll('#chart text').each(function (e) {
    d3.select(this).style('font-size', d3.select(this).style('font-size'));
    d3.select(this).style('font-family', d3.select(this).style('font-family'));
});

// html2canvas does not recognize dy
d3.selectAll('#chart tspan').each(function (e) {
    // convert em to px
    if (d3.select(this).attr('dy').indexOf('em') !== -1 && d3.select(this).style('font-size').indexOf('px') !== -1) {
        d3.select(this).attr('dy', d3.select(this).attr('dy').replace('em', '') * d3.select(this).style('font-size').replace('px', ''));
    }

    if (d3.select(this).attr('dy') != 0) {
        d3.select(this.parentNode).attr('y', Number(d3.select(this.parentNode).attr('y')) + Number(d3.select(this).attr('dy')));
        d3.select(this).attr('dy', 0);
    }
});



// html2canvas code
....

如果您正在使用其他库,则可能需要根据其理解的CSS属性添加/删除上述块.