Question

截至目前，目前支持转换Google图表的功能

  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;

是核心图表和地理图表。列表中不包括其他时间表，包括时间表。我花了一段时间来弄清楚getImageURI（）是不受支持的。那么将Google Chart Timeline转换为Image的替代方案是什么呢？你如何从时间线图中获得图像uri？有什么建议吗？

我尝试使用html2canvas，但似乎没有按预期捕获图表。这就是我所使用的。

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond $1 !^(index\.php|resources|robots\.txt)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L,QSA]
</IfModule>

有任何帮助吗？

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
    });
});

Google时间线图表到图片

1 个答案: