在后端将HTML渲染为图像并转换为Base64字符串的教程

Install-Package PuppeteerSharp

using PuppeteerSharp;
using System;
using System.IO;
using System.Threading.Tasks;

public class HtmlToImageConverterService
{
    private static IBrowser _browserInstance; // 缓存浏览器实例以提高性能
    private static readonly object _lock = new object(); // 用于线程安全的锁

    /// <summary>
    /// 异步初始化Chromium浏览器实例。
    /// 建议在应用程序启动时调用一次。
    /// </summary>
    public static async Task InitializeBrowserAsync()
    {
        if (_browserInstance == null)
        {
            lock (_lock) // 确保只有一个线程初始化浏览器
            {
                if (_browserInstance == null)
                {
                    Console.WriteLine("Downloading Chromium browser...");
                    // 下载与PuppeteerSharp兼容的Chromium版本
                    new BrowserFetcher().DownloadAsync(BrowserFetcher.DefaultChromiumRevision).Wait();
                    Console.WriteLine("Launching Chromium browser...");
                    // 启动无头浏览器实例
                    _browserInstance = Puppeteer.LaunchAsync(new LaunchOptions
                    {
                        Headless = true, // 在无头模式下运行
                        Args = new[] { "--no-sandbox" } // 在某些Linux环境中可能需要此参数
                    }).Result;
                    Console.WriteLine("Chromium browser initialized.");
                }
            }
        }
    }

    /// <summary>
    /// 异步处置Chromium浏览器实例。
    /// 建议在应用程序关闭时调用一次。
    /// </summary>
    public static async Task DisposeBrowserAsync()
    {
        if (_browserInstance != null)
        {
            Console.WriteLine("Disposing Chromium browser...");
            await _browserInstance.DisposeAsync();
            _browserInstance = null;
            Console.WriteLine("Chromium browser disposed.");
        }
    }

    /// <summary>
    /// 将HTML内容渲染为PNG图像并转换为Base64字符串。
    /// </summary>
    /// <param name="htmlContent">要渲染的HTML字符串。</param>
    /// <param name="viewportWidth">视口宽度。</param>
    /// <param name="viewportHeight">视口高度。</param>
    /// <returns>包含PNG图像的Base64数据URI字符串。</returns>
    /// <exception cref="InvalidOperationException">如果浏览器未初始化。</exception>
    public static async Task<string> ConvertHtmlToPngBase64Async(string htmlContent, int viewportWidth = 1024, int viewportHeight = 768)
    {
        if (_browserInstance == null)
        {
            throw new InvalidOperationException("Browser not initialized. Call InitializeBrowserAsync first.");
        }

        IPage page = null;
        try
        {
            page = await _browserInstance.NewPageAsync();
            // 设置视口大小，这会影响页面布局和截图尺寸
            await page.SetViewportAsync(new ViewPortOptions { Width = viewportWidth, Height = viewportHeight });

            // 设置HTML内容
            await page.SetContentAsync(htmlContent);

            // 等待网络空闲，确保所有资源（CSS、图片、字体等）都已加载并渲染
            // 这对于复杂的HTML页面至关重要，以避免截图内容不完整
            await page.WaitForNetworkIdleAsync(new WaitForOptions { Timeout = 10000 }); // 最长等待10秒

            // 截取页面截图为字节数组
            var screenshotBytes = await page.ScreenshotDataAsync(new ScreenshotOptions
            {
                Type = ScreenshotType.Png, // 指定图像类型为PNG
                FullPage = true // 截取整个可滚动页面，而不是仅视口可见部分
                // 如果需要截取特定区域，可以使用Clip选项：
                // Clip = new Clip { X = 0, Y = 0, Width = viewportWidth, Height = viewportHeight }
                // 或者截取特定HTML元素：
                // var element = await page.QuerySelectorAsync("#my-element-id");
                // if (element != null) {
                //     screenshotBytes = await element.ScreenshotDataAsync(new ScreenshotOptions { Type = ScreenshotType.Png });
                // }
            });

            // 将字节数组转换为Base64字符串，并添加数据URI前缀
            return "data:image/png;charset=utf-8;base64," + Convert.ToBase64String(screenshotBytes);
        }
        catch (Exception ex)
        {
            Console.WriteLine($"Error converting HTML to image: {ex.Message}");
            throw; // 重新抛出异常或进行其他错误处理
        }
        finally
        {
            // 确保页面实例被正确处置
            if (page != null)
            {
                await page.DisposeAsync();
            }
        }
    }
}

using System;
using System.Threading.Tasks;

public class Program
{
    public static async Task Main(string[] args)
    {
        // 1. 在应用程序启动时初始化浏览器
        await HtmlToImageConverterService.InitializeBrowserAsync();

        try
        {
            // 2. 准备动态HTML内容
            string dynamicHtml = @"
                <html>
                <head>
                    <style>
                        body { font-family: 'Arial', sans-serif; background-color: #f0f0f0; margin: 20px; }
                        .container {
                            width: 80%;
                            margin: 0 auto;
                            padding: 20px;
                            border: 1px solid #ccc;
                            border-radius: 8px;
                            background-color: #fff;
                            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
                        }
                        h1 { color: #333; text-align: center; }
                        p { color: #666; line-height: 1.6; }
                        .highlight { color: #e44d26; font-weight: bold; }
                    </style>
                </head>
                <body>
                    <div class='container'>
                        <h1>欢迎使用HTML转图片服务</h1>
                        <p>这是一个<span class='highlight'>动态生成</span>的HTML片段，它包含了<span class='highlight'>内联CSS样式</span>。</p>
                        <p>通过使用<span class='highlight'>Puppeteer-Sharp</span>，我们可以轻松地在后端将其渲染为高质量的图像。</p>
                        <p>当前时间: " + DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss") + @"</p>
                        <img src='https://via.placeholder.com/150/0000FF/FFFFFF?text=Example' alt='示例图片' style='display: block; margin: 20px auto;'/>
                    </div>
                </body>
                </html>";

            // 3. 调用转换方法
            string base64Image = await HtmlToImageConverterService.ConvertHtmlToPngBase64Async(dynamicHtml);

            // 4. 输出Base64字符串 (在实际应用中，您会将其嵌入邮件或保存)
            Console.WriteLine("Generated Base64 Image (first 100 chars):");
            Console.WriteLine(base64Image.Substring(0, Math.Min(base64Image.Length, 100)) + "...");

            // 示例：将Base64保存为文件（仅用于验证）
            string base64Data = base64Image.Split(',')[1];
            byte[] imageBytes = Convert.FromBase64String(base64Data);
            await File.WriteAllBytesAsync("output.png", imageBytes);
            Console.WriteLine("Image saved as output.png for verification.");
        }
        catch (Exception ex)
        {
            Console.WriteLine($"An error occurred: {ex.Message}");
        }
        finally
        {
            // 5. 在应用程序关闭时处置浏览器
            await HtmlToImageConverterService.DisposeBrowserAsync();
        }
    }
}