如何将包含 HTML 的字符串渲染到 C# 中的图像中？

Posted 2023-03-05

【中文标题】如何将包含 HTML 的字符串渲染到 C# 中的图像中？

【英文标题】：How to render a string containing HTML into an image in C#?

【发布时间】：2011-10-08 22:36:03

【问题描述】：

我正在开发一个为用户提供交互式反馈工具的 Web 应用程序。在此应用程序中，用户可以单击发送反馈按钮。该按钮在他们当前的网页上放置一个覆盖，并允许他们拖动突出显示区域DIVs 以强调某些区域。一旦他们提交反馈，整个页面的 html 就会通过 AJAX 传递回服务器。

一旦在服务器上，我现在有一个包含页面 HTML 的字符串。从这里我想通过某种呈现 HTML 并构建图像的引擎运行这个字符串。如果你愿意的话，一种关于截取屏幕截图的方法。

如何才能完成这样的事情？是否有可用的引擎用 C# 编写并且可以构建 HTML 并呈现图像？

【问题讨论】：

选项 1，在此处查看 Dillie 的回答：***.com/questions/334532/render-html-as-an-image

@DustinDavis 这不是网络表单控件吗？这是一个网络应用程序。

@Alex Ford，那个 HTML 字符串的 CSS 样式怎么样？你在考虑渲染纯 HTML 吗？

@hamlin11 我不确定这对我有什么帮助，你能解释一下吗？她说的这个魔法密码是什么？我有点困惑。

@Tocco，好问题。我不知道该怎么做。

【参考方案1】：

看看这个框架 - http://awesomium.com/

这正是你所需要的。

设置基本 URL，这将需要解析任何相对 URL

WebCore.SetBaseDirectory("C:\\MyApplication\\MyBaseDirectory");

然后加载 HTML -

myWebView.LoadHTML("<p>Hello World!</p>");

然后使用 .Render() 方法，您就可以将渲染的内容保存到图像中。

【讨论】：

这绝对是我要找的。​​span>

D：2900 美元除外！！！ Dang... 可悲的是，我们公司的收入远远超过 10 万美元，但我知道他们不会以 2900 美元的价格出现，因为我想要它相对简单。

看起来如果我想走便宜的路线，我将不得不坚持 Google+ 的方式并使用 HTML 5 中的canvas 标记来绘制屏幕截图。然后只限制 HTML 4 浏览器中的功能。

【参考方案2】：

如果您想使用 Gecko，可以考虑使用 LLMozLib。 查看更多详情here

编辑

有一个 ActiveX 控件可以在 Windows 上嵌入 Gecko。Sample here

编辑

我让它在 Windows 窗体应用程序上运行。 使用these resources. 它是 Gecko 的 csharp 包装器......

这是我的示例代码...

public partial class Form1 : Form

    public Form1()
    
        Xpcom.Initialize(@"C:\Users\esouza\Downloads\xulrunner"); //Tell where are XUL bin
        InitializeComponent();
        //geckoWebBrowser1 is an instance of GeckoWebBrowser control that I've dragged on the Form1
        geckoWebBrowser1.DocumentCompleted += new EventHandler(geckoWebBrowser1_DocumentCompleted);
    

    private void button1_Click(object sender, EventArgs e)
    
        geckoWebBrowser1.Navigate("http://www.google.com");
    

    void geckoWebBrowser1_DocumentCompleted(object sender, EventArgs e)
    
        Bitmap b = new Bitmap(geckoWebBrowser1.Width, geckoWebBrowser1.Height);
        geckoWebBrowser1.DrawToBitmap(b, new Rectangle  X = 0, Y = 0, Width = 800, Height = 600 );
        b.Save("file.bmp");
    

【参考方案3】：

非常有趣的问题，我没有灵丹妙药。

您肯定需要一个具有某种描述的浏览器引擎，然后将渲染的输出捕获为位图。

我从this question 看到有一个为 WebKit 开发的 COM 包装器。也许这是一个很好的起点。