Google Timeline Chart to Image

Question

到目前为止，目前支持的转换Google图表的函数是

getImageURI()

就是岩心图和地质图。其他的，包括时间线图表，不包括在列表中。我花了一段时间才明白getImageURI()是不受支持的。那么将Google Chart Timeline转换为Image的替代方案是什么呢？如何从时间线图表中获取图像uri？有什么建议吗？

我尝试使用html2canvas，但是图表似乎没有像预期的那样被捕获。这就是我用过的。

  var chartArea = document.getElementsByTagName('iframe')[0].
        contentDocument.getElementById('chartArea');
    var svg = chartArea.innerHTML;

    var canvas = doc.createElement('canvas');
    canvas.setAttribute('width', chartArea.offsetWidth);
    canvas.setAttribute('height', chartArea.offsetHeight);
    canvas.setAttribute(
      'style',
      'position: absolute; ' +
      'top: ' + (-chartArea.offsetHeight * 2) + 'px;' +
      'left: ' + (-chartArea.offsetWidth * 2) + 'px;');
    doc.body.appendChild(canvas);

    canvg(canvas, svg);
    var imgData = canvas.toDataURL("image/png");

    return imgData;

有什么帮助吗？

Answer 1

我知道这是一个迟来的答案，但我在这里挣扎了一下，我想把答案放在未来的参考。

这是我找到的一个fiddle，它具有将svg转换为png的基础。

我使用的是谷歌可视化的时间线图表。在div容器中，它为图形创建一个svg。我抓取了svg，添加了一些需要的属性，然后转换为base64 png。

下面是js代码：

google.visualization.events.addListener(chart, 'ready', function () {
    var getSVG = container.getElementsByTagName("svg")[0]; // Gets the graph
    getSVG.setAttribute('xmlns', "http://www.w3.org/2000/svg"); // Add attr to svg
    getSVG.setAttribute('xmlns:svg', "http://www.w3.org/2000/svg"); // Add attr to svg

    // From Fiddle
    var myCanvas = document.getElementById("canvas");
    var ctxt = myCanvas.getContext("2d");


    drawInlineSVG(ctxt, getSVG.outerHTML, function() {
        console.log(canvas.toDataURL());  // -> PNG
    });
});