HTML to Image Converter Overview

EvoPdf Chromium for .NET also allows you to easily convert in just a few lines of code HTML pages and HTML strings to raster images in PNG, JPG or WEBP format. In this section you can learn about the basic settings of the converter.

You can choose the HTML document to convert which can be:

  • A HTML page from a given URL. The URL must be accessible from the computer where the converter runs. The method you can use in this case is HtmlToImageConverterConvertUrl(String, ImageType)

  • A HTML string. When you convert a HTML string you also have the option to specify a base URL that will be used by converter to resolve the relative URLs found in the HTML string to fully qualified URLs. If your HTML string uses only fully qualified URLs then this parameter is not necessary. The method you can use in this case is HtmlToImageConverterConvertHtml(String, String, ImageType)

The basic options you can set are grouped in a few categories.

HTML Viewer Options

  • HTML Viewer Width. This option is the equivalent in converter of the browser window width. The property you can set in your code to control the browser window width is HtmlToImageConverterHtmlViewerWidth.

  • HTML Viewer Height. This option is the equivalent in converter of the browser window height and it represents the height of the HTML viewer. By default, the HTML to Image Converter will capture only the content in the viewport given by the HTML Viewer Width and Height, but you can set the next option to go beyond the viewport and screenshot the entire HTML page. The property you can set in your code to control the browser window height is HtmlToImageConverterHtmlViewerHeight

  • Capture Entire Page. The HtmlToImageConverterCaptureEntirePage property controls if the entire HTML page content will be captured in screenshot or only the area specified by the HtmlViewerHeight property. The captured content is limited by the MaxHtmlViewerHeight property. By default this property is true. Additionally, it is possible to choose between the browser’s internal mechanism and a custom algorithm for capturing the entire page using the HtmlToImageConverterCaptureEntirePageMode property. By default, the Browser mode is used by the converter.

Image Options

  • Image Format. This option allows you select the output image format. You can choose between PNG, JPG and WEBP. You can specify the image format as a parameter of the converter methods used to convert an URL or a HTML string.

Navigation Options

  • Navigation Timeout. This option represents the maximum time to wait for a web page to be loaded by converter. If the web page cannot be loaded in this time interval the converter will throw an exception. The property you can set in your code for this option is HtmlToImageConverterNavigationTimeout.

  • Delay Conversion. This option represents an additional time to wait after the HTML page was loaded to allow the asynchronous operations to finish before starting to capture the HTML content. If you cannot estimate the additional time to wait then you have the option to manually trigger the conversion. The property you can set in your code for this option is HtmlToImageConverterConversionDelay.

Code Sample - Convert HTML to Image

C#
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Http;

// Use EVO PDF Namespace
using EvoPdf.Chromium;

namespace EvoPdf_Chromium_AspNetDemo.Controllers.HTML_to_Image
{
    public class Convert_HTML_to_ImageController : Controller
    {
        [HttpPost]
        public ActionResult ConvertHtmlToImage(IFormCollection collection)
        {
            // Create a HTML to Image converter object with default settings
            HtmlToImageConverter htmlToImageConverter = new HtmlToImageConverter();

            // Set license key received after purchase to use the converter in licensed mode
            // Leave it not set to use the converter in demo mode
            htmlToImageConverter.LicenseKey = "4W9+bn19bn5ue2B+bn1/YH98YHd3d3c=";

            // Set HTML Viewer width in pixels which is the equivalent in converter of the browser window width
            htmlToImageConverter.HtmlViewerWidth = int.Parse(collection["htmlViewerWidthTextBox"]);

            // Set HTML viewer height in pixels to convert the top part of a HTML page 
            // Leave it not set to convert the entire HTML
            if (collection["htmlViewerHeightTextBox"][0].Length > 0)
                htmlToImageConverter.HtmlViewerHeight = int.Parse(collection["htmlViewerHeightTextBox"]);

            // enable the conversion of the entire page, not only the viewport defined by HtmlViewerWidth and HtmlViewerHeight
            htmlToImageConverter.CaptureEntirePage = collection["captureEntirePageCheckBox"].Count > 0;

            // Set the loading mode used to capture the entire page content
            htmlToImageConverter.CaptureEntirePageMode = collection["captureEntirePageModeDropDownList"] == "Browser" ?
                CaptureEntirePageMode.Browser : CaptureEntirePageMode.Custom;

            // Optionally auto resize HTML viewer height at the HTML content size determined after the initial loading
            htmlToImageConverter.AutoResizeHtmlViewerHeight = collection["autoResizeViewerHeightCheckBox"].Count > 0;

            // Set the maximum time in seconds to wait for HTML page to be loaded 
            // Leave it not set for a default 120 seconds maximum wait time
            htmlToImageConverter.NavigationTimeout = int.Parse(collection["navigationTimeoutTextBox"]);

            // Set an adddional delay in seconds to wait for JavaScript or AJAX calls after page load completed
            // Set this property to 0 if you don't need to wait for such asynchcronous operations to finish
            if (collection["conversionDelayTextBox"][0].Length > 0)
                htmlToImageConverter.ConversionDelay = int.Parse(collection["conversionDelayTextBox"]);

            byte[] outImageBuffer = null;
            if (collection["HtmlPageSource"] == "convertUrlRadioButton")
            {
                string url = collection["urlTextBox"];

                // Convert the HTML page given by an URL to an image into a memory buffer
                outImageBuffer = htmlToImageConverter.ConvertUrl(url, SelectedImageFormat(collection["imageFormatComboBox"]));
            }
            else
            {
                string htmlString = collection["htmlStringTextBox"];
                string baseUrl = collection["baseUrlTextBox"];

                // Convert a HTML string with a base URL to an image into a memory buffer
                outImageBuffer = htmlToImageConverter.ConvertHtml(htmlString, baseUrl, SelectedImageFormat(collection["imageFormatComboBox"]));
            }

            string imageFormatName = collection["imageFormatComboBox"][0].ToLower();

            // Send the image file to browser
            FileResult fileResult = new FileContentResult(outImageBuffer, "image/" + (imageFormatName == "jpg" ? "jpeg" : imageFormatName));
            fileResult.FileDownloadName = "HTML_to_Image." + imageFormatName;

            return fileResult;
        }

        private ImageType SelectedImageFormat(string selectedValue)
        {
            switch (selectedValue)
            {
                case "Png":
                    return ImageType.Png;
                case "Jpg":
                    return ImageType.Jpeg;
                case "Webp":
                    return ImageType.Webp;
                default:
                    return ImageType.Png;
            }
        }
    }
}

See Also