如何在.net中将html代码渲染为图像

时间:2014-01-08 22:05:20

标签: html .net image render

我正在尝试找出一种将Google可视化图表保存为图像的方法。谷歌没有提供将这些图表导出为图像的方法,我需要能够保存图表图像以添加到报告中。我希望能够完成这个服务器端,并且不希望必须依赖客户端来做任何事情。我找到了几个指向使用HTML5 canvas和javascript的解决方案,但这不是一个选项,因为它依赖于客户端的兼容性。有没有办法渲染HTML代码并使用.Net将其保存为图像?我列出了我用来生成HTML格式的Google Visualzation图表的字符串。

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)

1 个答案:

答案 0 :(得分: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