替代getimageuri（）谷歌图表日历

我有一个使用Google Charts API创建的日历图。我一直在寻找一种方法来打印图表png，我一直无法找到一个好的工作答案。替代getimageuri（）谷歌图表日历

由于getImageURI()不是日历图表列出的方法，因此我无法在Google Developer上使用打印PNG图表指南。

更新：

我能找到this tutorial这一直是有帮助的下载图像，但问题是，正在下载的文件的文件名是图像字节码和this page by greenthumb提供的解决方案不起作用正常。使用从连接到greenthumb页面的CanvasSaver GitHub下载的软件包，单击保存图像按钮时下载的文件是saveme.php文件，而不是实际的图像。我曾尝试将obj_close();放在echo $decoded;之前saveme.php，但这并没有帮助解决问题。

非常感谢所有帮助。

来源

2014-10-20 shhasan

不幸的是谷歌的图表只允许核心图表和geocharts当前要印有getImageURI（） – juvian 2014-10-20 18:27:01

你知道任何的替代品？也许使用JS/jQuery？ – shhasan 2014-10-20 18:36:29

不知道，也许这有助于：http://spin.atomicobject.com/2014/01/21/convert-svg-to-png/ – juvian 2014-10-20 18:41:28

这是最后一个脚本，适用于我的示例日历Google图表。将下载的文件命名为“calendar.png”，并使用链接的html下载属性进行设置。 JS Fiddle。我仍然在努力寻找一种方法来改变从透明到白色的图像背景。

<html> 

    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
     <script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script> 
     <script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script> 
     <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
     <script> 
      function getImgData(chartContainer) { 
       var chartArea = chartContainer.getElementsByTagName('svg')[0].parentNode; 
       var svg = chartArea.innerHTML; 
       var doc = chartContainer.ownerDocument; 
       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"); 
       canvas.parentNode.removeChild(canvas); 
       return imgData; 
      } 

      function saveAsImg(chartContainer) { 
       var imgData = getImgData(chartContainer); 
       var link = document.getElementById('linker'); 
       link.href = imgData; 
       link.download = "calendar.png"; 
      } 
     </script> 
     <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
     <script type="text/javascript"> 
      google.load("visualization", "1", { 
       packages: ["corechart", "treemap", "geochart", "calendar"] 
      }); 
      google.setOnLoadCallback(drawChart); 

      function drawChart() { 
       //Calendar 
       var dataTable = new google.visualization.DataTable(); 
       dataTable.addColumn({ 
        type: 'date', 
        id: 'Date' 
       }); 
       dataTable.addColumn({ 
        type: 'number', 
        id: 'Won/Loss' 
       }); 
       dataTable.addRows([ 
        [new Date(2012, 3, 13), 37032], 
        [new Date(2012, 3, 14), 38024], 
        [new Date(2012, 3, 15), 38024], 
        [new Date(2012, 3, 16), 38108], 
        [new Date(2012, 3, 17), 38229], 
        // Many rows omitted for brevity. 
        [new Date(2013, 9, 4), 38177], 
        [new Date(2013, 9, 5), 38705], 
        [new Date(2013, 9, 12), 38210], 
        [new Date(2013, 9, 13), 38029], 
        [new Date(2013, 9, 19), 38823], 
        [new Date(2013, 9, 23), 38345], 
        [new Date(2013, 9, 24), 38436], 
        [new Date(2013, 9, 30), 38447] 
       ]); 

       var chart = new google.visualization.Calendar(document.getElementById('calendar_basic')); 

       var options = { 
        title: "Red Sox Attendance", 
        height: 350, 
       }; 

       chart.draw(dataTable, options); 
      } 
     </script> 
    </head> 

    <body> 
<a title="Background is transparent." id="linker" onclick="saveAsImg(document.getElementById('calendar_basic'));"><button>Save as PNG Image</button></a> 

     <div id="calendar_basic" style="width: 1000px; height: 350px;"></div> 
    </body> 

</html>

来源

2014-10-21 21:15:37 shhasan

当我点击提供的JSFiddle参考中的另存为PNG按钮时，生成的图像显示为空白。 – Kal 2016-01-05 16:58:50

这很奇怪，我只是试了一下，我可以看到图像很好。你在另一台电脑上试过了吗？ – shhasan 2016-01-06 17:38:35

刚刚实现：不适用于Firefox（43.0.4），但它在Chrome中运行。 – Kal 2016-01-07 19:44:33

替代getimageuri（）谷歌图表日历

回答

相关问题