C# 将 HTML 字符串转换为图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17832304/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Convert HTML string to image
提问by Sachin
I have a string variable which holds HTML markup. This HTML markup basically represents the email content.
我有一个包含 HTML 标记的字符串变量。此 HTML 标记基本上代表电子邮件内容。
Now I want to create an image from this string content which actually holds the HTML markup. I don't want to create the HTML file by writing this content into them. I just want to create an image file using this string.
现在我想从这个字符串内容创建一个图像，它实际上包含 HTML 标记。我不想通过将这些内容写入其中来创建 HTML 文件。我只想使用这个字符串创建一个图像文件。
Here's what I have:
这是我所拥有的：
string emailBody="<html><head></head><body><p>This is my text<p>...</body</html>"
How can I create an Image from this emailBodystring content?
如何从此emailBody字符串内容创建图像？
采纳答案by Sachin
Thanks all for your responses. I used HtmlRendererexternal dll (library) to achieve the same and found below codefor the same.
感谢大家的回复。我使用HtmlRenderer外部 dll（库）来实现相同的功能，并在下面找到了相同的代码。
Here is the code for this
这是代码
public void ConvertHtmlToImage()
{
Bitmap m_Bitmap = new Bitmap(400, 600);
PointF point = new PointF(0, 0);
SizeF maxSize = new System.Drawing.SizeF(500, 500);
HtmlRenderer.HtmlRender.Render(Graphics.FromImage(m_Bitmap),
"<html><body><p>This is a shitty html code</p>"
+ "<p>This is another html line</p></body>",
point, maxSize);
m_Bitmap.Save(@"C:\Test.png", ImageFormat.Png);
}
回答by Alex Filipovici
Try the following:
请尝试以下操作：
using System;
using System.Drawing;
using System.Threading;
using System.Windows.Forms;
class Program
{
static void Main(string[] args)
{
var source = @"
<!DOCTYPE html>
<html>
<body>
<p>An image from W3Schools:</p>
<img
src=""http://www.w3schools.com/images/w3schools_green.jpg""
alt=""W3Schools.com""
width=""104""
height=""142"">
</body>
</html>";
StartBrowser(source);
Console.ReadLine();
}
private static void StartBrowser(string source)
{
var th = new Thread(() =>
{
var webBrowser = new WebBrowser();
webBrowser.ScrollBarsEnabled = false;
webBrowser.DocumentCompleted +=
webBrowser_DocumentCompleted;
webBrowser.DocumentText = source;
Application.Run();
});
th.SetApartmentState(ApartmentState.STA);
th.Start();
}
static void
webBrowser_DocumentCompleted(
object sender,
WebBrowserDocumentCompletedEventArgs e)
{
var webBrowser = (WebBrowser)sender;
using (Bitmap bitmap =
new Bitmap(
webBrowser.Width,
webBrowser.Height))
{
webBrowser
.DrawToBitmap(
bitmap,
new System.Drawing
.Rectangle(0, 0, bitmap.Width, bitmap.Height));
bitmap.Save(@"filename.jpg",
System.Drawing.Imaging.ImageFormat.Jpeg);
}
}
}
Note: Credits should go to Hans Passantfor his excellent answeron the question WebBrowser Control in a new threadwhich inspired this solution.
注意：感谢Hans Passant在一个新线程中对WebBrowser Control问题的出色回答，该线程启发了该解决方案。
回答by JIYAUL MUSTAPHA
<!--ForExport data in iamge -->
<script type="text/javascript">
function ConvertToImage(btnExport) {
html2canvas($("#dvTable")[0]).then(function (canvas) {
var base64 = canvas.toDataURL();
$("[id*=hfImageData]").val(base64);
__doPostBack(btnExport.name, "");
});
return false;
}
</script>
<!--ForExport data in iamge -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="../js/html2canvas.min.js"></script>
<table>
<tr>
<td valign="top">
<asp:Button ID="btnExport" Text="Download Back" runat="server" UseSubmitBehavior="false"
OnClick="ExportToImage" OnClientClick="return ConvertToImage(this)" />
<div id="dvTable" class="divsection2" style="width: 350px">
<asp:HiddenField ID="hfImageData" runat="server" />
<table width="100%">
<tr>
<td>
<br />
</td>
</tr>
<tr>
<td>
<asp:Label ID="Labelgg" runat="server" CssClass="labans4" Text=""></asp:Label>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
protected void ExportToImage(object sender, EventArgs e)
{
string base64 = Request.Form[hfImageData.UniqueID].Split(',')[1];
byte[] bytes = Convert.FromBase64String(base64);
Response.Clear();
Response.ContentType = "image/png";
Response.AddHeader("Content-Disposition", "attachment; filename=name.png");
Response.Buffer = true;
Response.Cache.SetCacheability(HttpCacheability.NoCache);
Response.BinaryWrite(bytes);
Response.End();
}
回答by Soni Kumari
Find the working code below:
找到下面的工作代码：
$(function() {
$("#btnSave").click(function() {
html2canvas($("#widget"), {
onrendered: function(canvas) {
theCanvas = canvas;
document.body.appendChild(canvas);
// Convert and download as image
Canvas2Image.saveAsPNG(canvas);
$("#img-out").append(canvas);
// Clean up
//document.body.removeChild(canvas);
}
});
});
});
Libraries needed to include:
图书馆需要包括：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="html2canvas.js"></script>
find the complete demo code: click here
找到完整的演示代码：点击这里
