如何在.net中将html代码呈现为图像_Html_.net_Image_Render

如何在.net中将html代码呈现为图像

html .net image

如何在.net中将html代码呈现为图像,html,.net,image,render,Html,.net,Image,Render,我正试图找到一种将谷歌可视化图表保存为图像的方法。谷歌没有提供一种将这些图表导出为图像的方法，我需要能够保存图表的图像以添加到报告中。我希望能够完成这个服务器端，而不想依赖客户端做任何事情。我已经找到了几个解决方案，它们指向使用HTML5画布和javascript，但这不是一个选项，因为它依赖于客户端的兼容性。有没有办法使用.Net呈现HTML代码并将其保存为图像？我列出了用于生成HTML格式的示例Google可视化图表的字符串 Dim html As String = "<html xm

我正试图找到一种将谷歌可视化图表保存为图像的方法。谷歌没有提供一种将这些图表导出为图像的方法，我需要能够保存图表的图像以添加到报告中。我希望能够完成这个服务器端，而不想依赖客户端做任何事情。我已经找到了几个解决方案，它们指向使用HTML5画布和javascript，但这不是一个选项，因为它依赖于客户端的兼容性。有没有办法使用.Net呈现HTML代码并将其保存为图像？我列出了用于生成HTML格式的示例Google可视化图表的字符串

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>"

PhantomJS提供了这种能力

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

它允许你完全按照自己的要求去做

本文展示了如何将C与phantomjs结合使用来拍摄屏幕截图：

Git hub现在对我来说已经关闭了，可能需要一点时间。这将是一个web应用程序，如果可能的话，我不想调用命令行应用程序。我已经对此做了大量的研究，我可以告诉你，这是生成呈现标记屏幕截图的最佳方法。

convertHtmlToImage(html,jpg)