How to Convert a Web Page to JPG Using Chromium and C#

Converting a web page to an image format like JPG can be incredibly useful for various purposes, such as creating thumbnails, generating reports, or archiving web content. In this blog post, you’ll walk through the process of building a simple conversion engine using the open-source Chromium project and C#. You’ll break down the process into easy-to-understand steps and explain the code in detail.
Convert Webpage to JPG

Overview of Chromium

Before diving into the steps, let’s take a moment to understand Chromium and why it’s such a powerful tool for web-related tasks.

What is Chromium?

Chromium is an open-source web browser project that is the foundation for many popular browsers, including Google Chrome and Microsoft Edge. It provides a fast, secure, and modern web browsing experience, and its open-source nature allows developers to customize and embed it into their own applications.

Why Use Chromium for Web-to-Image Conversion?

Chromium is an excellent choice for tasks like converting web pages to images because:

  1. Rendering Accuracy: Chromium uses the same rendering engine as Google Chrome, ensuring that web pages are displayed exactly as they would be in a browser.

  2. Headless Mode: Chromium can run in headless mode, which doesn’t require a visible window. This is perfect for automation tasks like taking screenshots or generating PDFs.

  3. JavaScript Support: Chromium fully supports JavaScript, allowing you to interact with web pages dynamically (e.g., measuring page dimensions or clicking buttons).

  4. Cross-Platform: Chromium works on multiple platforms (Windows, macOS, Linux), making it a versatile tool for developers.

By leveraging Chromium through the CefSharp library, you can easily embed Chromium in a C# application and automate web-related tasks like converting a web page to a JPG image.

Step-by-Step Guide

Step 1: Setting Up the Environment

Before diving into the code, you must set up your development environment. You’ll use Visual Studio as our development tool and C# as the programming language. Make sure you have the following installed:

  1. Visual Studio (any recent version)

  2. .NET Framework (You’ll use a Console App (.NET Framework) project for this example)

Step 2: Create a New Console App (.NET Framework) Project

  1. Open Visual Studio.

  2. Click on Create a new project.

  3. Search for Console App (.NET Framework) in the Create a new project dialog.

  4. Select the Console App (.NET Framework) template and click Next.

    Choose Console App

  5. Name your project (e.g., WebToJpg) and choose a location to save it.

  6. Select the .NET Framework version (e.g., .NET Framework 4.6.2 or later) and click Create.

    Name your project

This will create a new console application project where you’ll write our code.

Step 3: Install the CefSharp NuGet Package

To use Chromium in your C# project, you need to install the CefSharp NuGet package. CefSharp is a .NET library that allows you to embed the Chromium browser in your applications.

  1. In Visual Studio, right-click on your project in the Solution Explorer.

  2. Select Manage NuGet Packages.

  3. In the NuGet Package Manager, click on the Browse tab.

  4. Search for CefSharp.OffScreen (since we’re building a headless application).

    Choose Console App

  5. Select the package and click Install.

  6. Accept any license agreements or dependency installations that may pop up.

    Name your project

This will install the necessary libraries to use Chromium in your project.

Step 4: Initialize the Chromium Browser

The first step in our program is to initialize the Chromium browser. Chromium is the open-source browser project that powers Google Chrome, and CefSharp is a .NET library that allows us to embed Chromium in our C# applications.

var settings = new CefSettings { WindowlessRenderingEnabled = true };
Cef.Initialize(settings);

Here, you configure Chromium to run in headless mode (without a visible window) using CefSettings. This is important because you don’t need a user interface for this task—you want to capture the web page as an image.

Step 5: Define the Web Page URL and Output Path

Next, you define the web page URL you want to convert and the path where the resulting JPG image will be saved.

string inputUrl = "https://www.google.com/";
string outputPath = @"C:\Project\Test\WebToJpg\Output.jpg";

In this example, you’re converting the Google homepage to a JPG image and saving it to a specific folder on the C: drive.

Step 6: Load the Web Page

You create an instance of the Chromium browser and navigate to the specified URL.

browser = new ChromiumWebBrowser(inputUrl);
await browser.WaitForInitialLoadAsync();

The WaitForInitialLoadAsync method ensures that the browser has fully loaded the web page before we proceed. This is crucial because we need the entire page to be rendered before capturing it.

Step 7: Measure the Page Dimensions

To capture the entire web page, you must know its dimensions (width and height). You use JavaScript to measure the size of the page content.

var dimensions = await browser.EvaluateScriptAsync(@"
    (function() {
        var body = document.body,
            html = document.documentElement;
        var width = Math.max(body.scrollWidth, body.offsetWidth,
            html.clientWidth, html.scrollWidth, html.offsetWidth);
        var height = Math.max(body.scrollHeight, body.offsetHeight,
            html.clientHeight, html.scrollHeight, html.offsetHeight);
        return { width: width, height: height };
    })();
");

This JavaScript code calculates the total width and height of the page by comparing various properties of the HTML and body elements. The result is returned as a dictionary containing the width and height.

Step 8: Resize the Browser Window

Once you have the dimensions, you resize the browser window to match the size of the web page content.

if (dimensions.Success && dimensions.Result is IDictionary<string, object> result)
{
    int width = Convert.ToInt32(result["width"]);
    int height = Convert.ToInt32(result["height"]);
    browser.Size = new System.Drawing.Size(width, height);
}

This ensures that the entire page is visible when you take the screenshot.

Step 9: Capture the Screenshot

With the browser window resized, you can now capture the web page as an image.

var screenshot = await browser.CaptureScreenshotAsync();
System.IO.File.WriteAllBytes(outputPath, screenshot);

The CaptureScreenshotAsync method takes a screenshot of the current browser window and returns it as a byte array. You then save this byte array as a JPG file using File.WriteAllBytes.

Step 10: Clean Up

Finally, you shut down the Chromium browser to free up resources.

Cef.Shutdown();

This step is essential to ensure the application exits cleanly and does not leave any processes running in the background.

Code Description (Combined into One Step)

Now, let's look at the complete code, including the code from the previous step. The program starts by initializing the Chromium browser in headless mode. It then navigates to the specified URL and waits for the page to load completely. Using JavaScript, it measures the dimensions of the page content and resizes the browser window accordingly. Once the browser window is the correct size, it captures a screenshot of the page and saves it as a JPG file. Finally, it shuts down the browser to clean up resources.

Here’s the complete code with comments for clarity:

using CefSharp;
using CefSharp.OffScreen;
using System;
using System.Collections.Generic;
using System.IO;
using System.Threading.Tasks;

namespace WebToJpg
{
    class Program
    {
        private static ChromiumWebBrowser browser;

        static void Main(string[] args)
        {
            try
            {
                // Step 4: Initialize Chromium in headless mode
                var settings = new CefSettings { WindowlessRenderingEnabled = true };
                Cef.Initialize(settings);

                // Step 5: Convert the web page to JPG
                WebToJpgHeadless().GetAwaiter().GetResult();

                // Step 10: Shutdown Chromium
                Cef.Shutdown();
            }
            catch (Exception ex)
            {
                Console.WriteLine($"Error: {ex.Message}");
            }
            finally
            {
                Cef.Shutdown();
            }
        }

        private static async Task WebToJpgHeadless()
        {
            // Step 5: Define the URL and output path
            string inputUrl = "https://www.google.com/";
            string outputPath = @"C:\Project\Test\WebToJpg\Output.jpg";

            // Step 6: Load the web page
            browser = new ChromiumWebBrowser(inputUrl);
            await browser.WaitForInitialLoadAsync();

            using (var browser = new ChromiumWebBrowser(inputUrl))
            {
                await browser.WaitForInitialLoadAsync();

                // Step 7: Measure the page dimensions using JavaScript
                var dimensions = await browser.EvaluateScriptAsync(@"
                    (function() {
                        var body = document.body,
                            html = document.documentElement;
                        var width = Math.max(body.scrollWidth, body.offsetWidth,
                            html.clientWidth, html.scrollWidth, html.offsetWidth);
                        var height = Math.max(body.scrollHeight, body.offsetHeight,
                            html.clientHeight, html.scrollHeight, html.offsetHeight);
                        return { width: width, height: height };
                    })();
                ");

                if (dimensions.Success && dimensions.Result is IDictionary<string, object> result)
                {
                    // Step 8: Resize the browser window
                    int width = Convert.ToInt32(result["width"]);
                    int height = Convert.ToInt32(result["height"]);
                    browser.Size = new System.Drawing.Size(width, height);

                    // Step 9: Capture the screenshot and save it as a JPG
                    var screenshot = await browser.CaptureScreenshotAsync();
                    System.IO.File.WriteAllBytes(outputPath, screenshot);
                }
                else
                {
                    Console.WriteLine("Failed to get page size.");
                }
            }
        }
    }
}

Conclusion

And that’s it! You’ve built a simple yet powerful tool to convert any web page to a JPG image using Chromium and C# in just ten steps. This example demonstrates how you can leverage open-source projects like Chromium to create custom solutions for your specific needs. Whether you’re a beginner or an experienced developer, this project is a great way to get hands-on experience with browser automation and image processing in C#. Happy coding!

Convert Webpage to JPG Demo