javascript - 将 div 或 svg 转换为 datauri

Question

我基本上创建了一个FIDDLE并制作了一个示例图表。

这是图表的代码

var chart = c3.generate({
    data: {
        json: [{
            date: '2014-01-01',
            upload: 200,
            download: 200,
            total: 400
        }, {
            date: '2014-01-02',
            upload: 100,
            download: 300,
            total: 400
        }, {
            date: '2014-02-01',
            upload: 300,
            download: 200,
            total: 500
        }, {
            date: '2014-02-02',
            upload: 400,
            download: 100,
            total: 500
        }],
        keys: {
            x: 'date',
            value: ['upload', 'download']
        }
    },
    axis: {
        x: {
            type: 'timeseries',
            tick: {
                format: function (x) {
                    if (x.getDate() === 1) {
                        return x.toLocaleDateString();
                    }
                }
            }
        }
    }
});

我正在尝试将此图表转换为 datauri，我可以用它来绘制图像。我想知道最好的方法是什么？

我做了研究并发现了以下内容approach但我无法成功实现它。任何有关此事的帮助将不胜感激。

Answer 1

要将 svg 转换为图像，首先需要将其绘制在 Canvas 上，然后从 Canvas 中获取 dataUrl。我编辑了你的 fiddle ，似乎存在一些渲染问题，但有主要步骤来做到这一点。

canvg('canvas', document.getElementById('chart').innerHTML);

// the canvas calls to output a png
var canvas = document.getElementById("canvas");
var img = canvas.toDataURL("image/png");

Link to fiddle