2014-01-08 39 views
0

我在想方设法将Google可视化图表保存为图像。 Google不提供将这些图表导出为图像的方法,我需要能够保存图表的图像以添加到报告中。我希望能够完成这个服务器端,不想依赖于客户端的任何东西。我发现了几个解决方案,指向使用JavaScript的HTML5画布,但这不是一种选择,因为它依赖于客户端的兼容性。有没有一种方法来呈现HTML代码并使用.Net将其保存为图像?我列出了用于在HTML中生成示例Google Visualzation图表的字符串。如何在.net中将图像渲染为图像

Dim html As String = "<html xmlns=" & Chr(34) & "http://www.w3.org/1999/xhtml" & Chr(34) & "><head><title>Test HTML CAPTURE</title></head><body><script src=" & Chr(34) & "https://www.google.com/jsapi" & Chr(34) & " type=" & Chr(34) & "text/javascript" & Chr(34) & "></script><script type=" & Chr(34) & "text/javascript" & Chr(34) & "> /*CACHARTS*/ google.load(" & Chr(34) & "visualization" & Chr(34) & ", " & Chr(34) & "1" & Chr(34) & ", {packages:[" & Chr(34) & "corechart" & Chr(34) & "]}); google.setOnLoadCallback(drawChart); function drawChart() { var data; var chart; document.getElementById('chart1_div').scrollIntoView();chartTitle = ''; xColumn = 'Quarter'; yColumn = 'Avg Sold Price'; zColumn = 'Smoothed'; yTitle = 'Price in Thousands'; chart = new google.visualization.LineChart(document.getElementById('chart1_div')); legendType = 'none'; data = new google.visualization.DataTable(); data.addColumn('string', xColumn); data.addColumn('number', yColumn); data.addColumn('number', zColumn); data.addRows(35); data.setValue(0, 0, '2005-Q1'); data.setValue(0, 1, 288+0); data.setValue(1, 0, '2005-Q2'); data.setValue(1, 1, 285+0); data.setValue(2, 0, '2005-Q3'); data.setValue(2, 1, 315+0); data.setValue(3, 0, '2005-Q4'); data.setValue(3, 1, 318+0); data.setValue(4, 0, '2006-Q1'); data.setValue(4, 1, 310+0); data.setValue(5, 0, '2006-Q2'); data.setValue(5, 1, 286+0); data.setValue(6, 0, '2006-Q3'); data.setValue(6, 1, 299+0); data.setValue(7, 0, '2006-Q4'); data.setValue(7, 1, 278+0); data.setValue(8, 0, '2007-Q1'); data.setValue(8, 1, 283+0); data.setValue(9, 0, '2007-Q2'); data.setValue(9, 1, 278+0); data.setValue(10, 0, '2007-Q3'); data.setValue(10, 1, 287+0); data.setValue(11, 0, '2007-Q4'); data.setValue(11, 1, 260+0); data.setValue(12, 0, '2008-Q1'); data.setValue(12, 1, 299+0); data.setValue(13, 0, '2008-Q2'); data.setValue(13, 1, 273+0); data.setValue(14, 0, '2008-Q3'); data.setValue(14, 1, 259+0); data.setValue(15, 0, '2008-Q4'); data.setValue(15, 1, 231+0); data.setValue(16, 0, '2009-Q1'); data.setValue(16, 1, 233+0); data.setValue(17, 0, '2009-Q2'); data.setValue(17, 1, 244+0); data.setValue(18, 0, '2009-Q3'); data.setValue(18, 1, 234+0); data.setValue(19, 0, '2009-Q4'); data.setValue(19, 1, 219+0); data.setValue(20, 0, '2010-Q1'); data.setValue(20, 1, 235+0); data.setValue(21, 0, '2010-Q2'); data.setValue(21, 1, 236+0); data.setValue(22, 0, '2010-Q3'); data.setValue(22, 1, 207+0); data.setValue(23, 0, '2010-Q4'); data.setValue(23, 1, 210+0); data.setValue(24, 0, '2011-Q1'); data.setValue(24, 1, 184+0); data.setValue(25, 0, '2011-Q2'); data.setValue(25, 1, 188+0); data.setValue(26, 0, '2011-Q3'); data.setValue(26, 1, 202+0); data.setValue(27, 0, '2011-Q4'); data.setValue(27, 1, 186+0); data.setValue(28, 0, '2012-Q1'); data.setValue(28, 1, 204+0); data.setValue(29, 0, '2012-Q2'); data.setValue(29, 1, 237+0); data.setValue(30, 0, '2012-Q3'); data.setValue(30, 1, 185+0); data.setValue(31, 0, '2012-Q4'); data.setValue(31, 1, 195+0); data.setValue(32, 0, '2013-Q1'); data.setValue(32, 1, 196+0); data.setValue(33, 0, '2013-Q2'); data.setValue(33, 1, 225+0); data.setValue(34, 0, '2013-Q3'); data.setValue(34, 1, 218+0); data.setValue(0, 2, 302+0); data.setValue(1, 2, 301+0); data.setValue(2, 2, 301+0); data.setValue(3, 2, 300+0); data.setValue(4, 2, 298+0); data.setValue(5, 2, 296+0); data.setValue(6, 2, 293+0); data.setValue(7, 2, 290+0); data.setValue(8, 2, 286+0); data.setValue(9, 2, 282+0); data.setValue(10, 2, 278+0); data.setValue(11, 2, 274+0); data.setValue(12, 2, 269+0); data.setValue(13, 2, 263+0); data.setValue(14, 2, 257+0); data.setValue(15, 2, 251+0); data.setValue(16, 2, 245+0); data.setValue(17, 2, 239+0); data.setValue(18, 2, 233+0); data.setValue(19, 2, 227+0); data.setValue(20, 2, 222+0); data.setValue(21, 2, 217+0); data.setValue(22, 2, 212+0); data.setValue(23, 2, 208+0); data.setValue(24, 2, 205+0); data.setValue(25, 2, 202+0); data.setValue(26, 2, 201+0); data.setValue(27, 2, 200+0); data.setValue(28, 2, 201+0); data.setValue(29, 2, 201+0); data.setValue(30, 2, 203+0); data.setValue(31, 2, 204+0); data.setValue(32, 2, 206+0); data.setValue(33, 2, 209+0); data.setValue(34, 2, 211+0); chart.draw(data, {title: chartTitle ,vAxis:{title: yTitle} ,width: 700, height: 700 ,hAxis:{slantedText:true, slantedTextAngle:90, textStyle:{fontSize:10}} ,curveType:'function' ,lineWidth:1 ,pointSize:1 ,legend:'none' ,legend: legendType }); window.scroll(0,0);} </script><div><span class=" & Chr(34) & "float-left" & Chr(34) & " id=" & Chr(34) & "chart1_div" & Chr(34) & "></span><div style=" & Chr(34) & "clear:both" & Chr(34) & "></div></div></body></html>" 

有谁知道任何工具,可以让我呈现html然后将其保存为图像。

convertHtmlToImage(html,jpg) 

回答

0

PhantomJS提供此功能。

http://phantomjs.org/

这里是一个很好的链接有解释如何使用它:

https://github.com/ariya/phantomjs/wiki/Screen-Capture

它可以让你做你问什么了。

本文介绍如何使用C#与phantomjs采取截图:

http://www.codeproject.com/Tips/598045/Capture-screen-of-webpage-in-different-formats

+0

Git的枢纽下来,现在对我来说,可能想给它一秒钟。 – BentOnCoding

+0

这将是一个Web应用程序,如果可能的话,我宁可不打电话给命令行应用程序。 – Jonathan

+0

我已经做了大量的研究,我可以告诉你,这是生成渲染标记屏幕截图的最佳方法。 – BentOnCoding