我有一个字符串变量，其中包含HTML标记。该HTML标记基本上代表电子邮件的内容。
现在我想从这个字符串内容创建一个图像，该图像实际上包含HTML标记。 我不想通过将此内容写入HTML文件来创建HTML文件。我只想使用这个字符串创建一个图像文件。
以下是我的代码：
string emailBody="<html><head></head><body><p>This is my text<p>...</body</html>"
如何从这个emailBody字符串内容创建一张图片？
将HTML字符串转换为图片
48
- Sachin
4
1将 HTML 渲染成图片 - Kees de Wit
1你需要类似于http://htmlrenderer.codeplex.com/这样的东西吗？ - Alex Filipovici
1感谢@AlexFilipovici。我已经研究过这个问题，并且也找到了一篇相关的文章。但是我想知道是否有任何本地代码可用于此。如果没有其他选择，我将使用它。http://amoghnatu.wordpress.com/2013/05/13/converting-html-text-to-image-using-c/ - Sachin
10@KeesDeWit这个问题似乎集中在客户端渲染（在浏览器中），而这个问题希望代码不在浏览器之外。 - Hans Kesting
4个回答
72
感谢大家的回复。我使用了外部dll（库）HtmlRenderer 来实现相同的功能，并在下面找到了代码。
这是实现该功能的代码：
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 some html code</p>"
+ "<p>This is another html line</p></body>",
point, maxSize);
m_Bitmap.Save(@"C:\Test.png", ImageFormat.Png);
}
- Sachin
14
1请使用HtmlRenderer.HtmlRender.RenderGdiPlus，否则效果可能不太好。 - Stefan Steiger
2我尝试使用上面引用htmlrenderer程序集的代码，但它没有起作用。无法识别程序集。我尝试使用名称空间"using TheArtOfDev.HtmlRenderer"。 - subash
1HtmlRenderer在当前上下文中不存在是错误消息。 - subash
7Subash，您需要添加HtmlRenderer、WinForms，并使用TheArtOfDev.HtmlRenderer.WinForms.HtmlRender.RenderToImage。 - adinas
3我在我的ASP.NET Web应用程序中添加了HtmlRenderer.Core dll，但是没有可用的HtmlRenderer.HtmlRender.Render方法。 - Roshan Parmar
显示剩余9条评论
30
尝试以下操作：
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);
}
}
}
注意：本解决方案的灵感来自于Hans Passant在问题WebBrowser Control in a new thread上所提供的出色answer，特此致谢。
- Alex Filipovici
5
这对我来说一直很有效。只是发现了一个限制。通过CSS中的@font-face访问的下载字体无法呈现。 - Paul Evans
我不相信这在 .net core 中可用。它似乎只存在于 framework 中。 - Sarah
@Paul Evans，你找到可以处理这个的解决方案了吗？ - Mark Z.
1简单的概念！有人知道如何扩展这个解决方案，以便将整个页面适应输出图像，即使页面的高度大于图像的高度？ - Bliss
考虑使用
webBrowser.ScriptErrorsSuppressed = true;。否则，如果出现错误，它将不会报告。 - Gray Programmerz1
我发现了这个问题，所以我想发布我的最新解决方案，供任何搜索类似内容的人使用。
我使用了（开源）Puppeteer Sharp (v3)。结果看起来像这样：
public class ImageRenderer : IDisposable
{
private BrowserFetcher _browserFetcher;
public ImageRenderer()
{
_browserFetcher = new BrowserFetcher();
}
public async Task<byte[]> RenderImageDataAsync(string html)
{
try
{
// Download chrome (headless) browser (first time takes a while).
await _browserFetcher.DownloadAsync();
// Launch the browser and set the given html.
await using var browser = await Puppeteer.LaunchAsync(new LaunchOptions { Headless = true });
await using var page = await browser.NewPageAsync();
await page.SetContentAsync(html);
// Select the element and take a screen-shot, or just use the page, for example: page.ScreenshotDataAsync()
var elementQuery = "#myElementId";
await page.WaitForSelectorAsync(elementQuery, new WaitForSelectorOptions { Timeout = 2000 }); // Wait for the selector to load.
var elementHandle = await page.QuerySelectorAsync(elementQuery); // Declare a variable with an ElementHandle.
var result = await elementHandle.ScreenshotDataAsync(
new ScreenshotOptions
{
Type = ScreenshotType.Png
// Quality = Not supported with PNG images!
}
);
await browser.CloseAsync();
return result;
}
catch (Exception ex)
{
// Log ex $"{nameof(RenderImageDataAsync)}: Unable to render image from {nameof(html)}={html}");
}
return null;
}
public void Dispose()
{
_browserFetcher = null;
}
}
- 优点: 使用真实的浏览器；
- 缺点: 使用真实的浏览器;
_browserFetcher.DownloadAsync();将会下载（到文件夹.local-chromium）大约380MB的文件。
- WizxX20
-4
<!--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();
}
- Code
1
OP 明显正在寻求使用 C# ASP.Net 的方法，而不是在浏览器中执行。 - phuzi
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接