HTML to Image Converter

The HTML to Image converter allows you to quickly create screenshots of the HTML documents. The class representing the HTML to Image converter is HiQPdf.ChromiumHtmlToImage.

The most important options of the HTML to Image Converter are described in detail in the topics below.

Convert Methods

The following methods of the HiQPdf.Chromium.HtmlToImage class can be called to convert HTML documents to image.

Methods to convert the HTML document from a given URL to image:

Methods to convert a HTML string to an image:

Below there is a detailed description of the most important options of the HTML to Image Converter.

Serial Number

The SerialNumber property of the of the HiQPdf.Chromium.HtmlToImage class must be set with the purchased serial number as described in the License Purchasing section. In the sample code below is set with an evaluation serial number.

Browser Width

The BrowserWidth property of the HiQPdf.Chromium.HtmlToImage class is the equivalent of the web browser window width when viewing a web page. The default value is 1024 pixels.

Browser Height

The BrowserHeight property of the HiQPdf.Chromium.HtmlToImage class is the equivalent of the web browser window height when viewing a web page. By default, the HTML to Image Converter will capture only the content in the viewport given by the BrowserWidth and BrowserHeight properties, but it is possible to convert the entire HTML page setting the poperty below. The default browser height is 2048 pixels.

Convert Entire Page

The ConvertEntirePage property controls if the entire HTML page content will be captured in screenshot or only the area specified by the BrowserHeight property. The captured content is limited by the MaxBrowserHeight 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 HtmlToImageConvertEntirePageMode property. By default, the Browser mode is used by the converter.

Wait Before Convert

The WaitBeforeConvert property of the HiQPdf.Chromium.HtmlToImage class introduces an additional time in seconds to wait before starting the conversion to allow more time to JavaScript to update the web page.

Load HTML Timeout

The HtmlLoadedTimeout property of the HiQPdf.Chromium.HtmlToImage class controls the maximum time in seconds to wait for HTML document to be loaded. The default value is 120 seconds. An exception is thrown if the HTML document cannot be loaded in HtmlLoadedTimeout seconds.

HTML to Image Converter Demo

In this demo you can convert an URL or a HTML code to an image. You can select the image format (PNG, JPG, WEBP), the browser width and height in pixels, you can choose to capture the entire HTML page, set the wait before conversion delay and the HTML load timeout.

HTML to Image Demo Source Code

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

using HiQPdf.Chromium;

namespace HiQPdf_Chrome_AspNetDemo.Controllers
{
    public class ConvertHtmlToImageController : Controller
    {
        IFormCollection m_formCollection;

        // GET: ConvertHtmlToImage
        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public ActionResult ConvertToImage(IFormCollection collection)
        {
            m_formCollection = collection;

            // create the HTML to Image converter
            HtmlToImage htmlToImageConverter = new HtmlToImage();

            // set a demo serial number
            htmlToImageConverter.SerialNumber = "YCgJMTAE-BiwJAhIB-EhlWTlBA-UEBRQFBA-U1FOUVJO-WVlZWQ==";

            // set browser width
            htmlToImageConverter.BrowserWidth = int.Parse(collection["textBoxBrowserWidth"]);

            // set browser height if specified, otherwise use the default
            if (collection["textBoxBrowserHeight"][0].Length > 0)
                htmlToImageConverter.BrowserHeight = int.Parse(collection["textBoxBrowserHeight"]);

            // enable the conversion of the entire page, not only the viewport defined by BrowserWidth and BrowserHeight
            htmlToImageConverter.ConvertEntirePage = collection["conevertEntirePageCheckBox"].Count > 0;

            // set the loading mode used to convert the entire page content
            htmlToImageConverter.ConvertEntirePageMode = collection["convertEntirePageModeDropDownList"] == "Browser" ?
                ConvertEntirePageMode.Browser : ConvertEntirePageMode.Custom;

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

            // set wait time before starting conversion
            htmlToImageConverter.WaitBeforeConvert = int.Parse(collection["textBoxWaitTime"]);

            // set HTML Load timeout
            htmlToImageConverter.HtmlLoadedTimeout = int.Parse(collection["textBoxLoadHtmlTimeout"]);

            // the image buffer in the selected image format
            byte[] imageBuffer = null;
            ImageType imageType = GetSelectedImageFormat();

            if (collection["UrlOrHtmlCode"] == "radioButtonConvertUrl")
            {
                // convert URL
                string url = collection["textBoxUrl"];

                imageBuffer = htmlToImageConverter.ConvertUrlToMemory(url, imageType);
            }
            else
            {
                // convert HTML code
                string htmlCode = collection["textBoxHtmlCode"];
                string baseUrl = collection["textBoxBaseUrl"];

                imageBuffer = htmlToImageConverter.ConvertHtmlToMemory(htmlCode, baseUrl, imageType);
            }

            // inform the browser about the binary data format
            string imageFileExtension = GetImageFileExtension(imageType);
            string imageFileName = string.Format("HtmlToImage.{0}", imageFileExtension);

            string mimeType = GetImageMimeType(imageType);
            FileResult fileResult = new FileContentResult(imageBuffer, "image/" + mimeType);
            fileResult.FileDownloadName = imageFileName;

            return fileResult;
        }

        private string GetImageMimeType(ImageType imageType)
        {
            switch (imageType)
            {
                case ImageType.Png:
                    return "png";
                case ImageType.Jpeg:
                    return "jpeg";
                case ImageType.Webp:
                    return "webp";
                default:
                    return "png";
            }
        }

        private string GetImageFileExtension(ImageType imageType)
        {
            switch (imageType)
            {
                case ImageType.Png:
                    return "png";
                case ImageType.Jpeg:
                    return "jpg";
                case ImageType.Webp:
                    return "webp";
                default:
                    return "png";
            }
        }

        private ImageType GetSelectedImageFormat()
        {
            switch (m_formCollection["dropDownListImageFormat"])
            {
                case "PNG":
                    return ImageType.Png;
                case "JPG":
                    return ImageType.Jpeg;
                case "WEBP":
                    return ImageType.Webp;
                default:
                    return ImageType.Png;
            }
        }
    }
}

See Also