43

我有一个包含 HTML 标记的字符串变量。这个 HTML 标记基本上代表了电子邮件内容。

现在我想从这个字符串内容创建一个实际包含 HTML 标记的图像。我不想通过将此内容写入其中来创建 HTML 文件。我只想使用这个字符串创建一个图像文件。

这是我所拥有的：

string emailBody="<html><head></head><body><p>This is my text<p>...</body</html>"

如何从此emailBody字符串内容创建图像？

4

4 回答 4

66

谢谢大家的回复。我使用HtmlRenderer外部 dll（库）来实现相同的功能，并在下面找到相同的代码。

这是这个的代码

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);
}
于 2013-07-24T13:47:08.230 回答
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问题的出色回答激发了这个解决方案。

于 2013-07-24T12:37:06.747 回答
0

所以我来了这个，我想我会为任何搜索这样的东西的人发布我的最新解决方案。

我使用了（开源）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;
        }
    }
  • Pro：使用真正的浏览器；
  • 缺点：使用真正的浏览器；_browserFetcher.DownloadAsync();将为此下载（到文件夹.local-chromium）大约 380MB 的文件。
于 2021-10-13T11:02:20.197 回答
-3 
       <!--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();

                }
于 2018-10-17T05:23:49.643 回答