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 HiQPdfClientHtmlToImage.

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

Serial Number

The SerialNumber property of the of the HiQPdfClient.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.

Create a Transparent Image

The HtmlToImageTransparentImage property controls if the resulted image has a transparent background when converting a HTML documement without background color or background image. This property is false by default.

Browser Width

The BrowserWidth property of the HiQPdfClient.HtmlToImage class is a property having a very high influence against the HTML content rendering. Changing this property is basically the equivalent of resizing a web browser window when viewing a web page. By default the Browser Width is 1200 pixels and this is suitable for displaying most of the web pages.

Load HTML Timeout

The HtmlLoadedTimeout property of the HiQPdfClient.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.

Convert Methods

The Convert methods of the of the HiQPdfClient.HtmlToImage class are finally called to convert HTML documents to images. Function of how the HTML document to be converted is given, by URL or by content, the following Convert methods are defined in the HiQPdfClient.HtmlToImage class:

HTML to Image Converter Demo

In this demo you can convert an URL, a local file or a custom HTML code to an image. You can select the image format (PNG, JPG, BMP) and the browser width in pixels. When the selected image format is PNG it is also possible to choose if the image background is transparent when the HTML document does not have a background.

Demo Source Code

C#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Http;

using HiQPdfClient;

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

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

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

            string serverIP = collection["textBoxServerIP"];
            uint serverPort = uint.Parse(collection["textBoxServerPort"]);
            string serverPassword = collection["textBoxServerPassword"];

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

            // use server password if necessary
            if (serverPassword.Length > 0)
                htmlToImageConverter.ServerPassword = serverPassword;

            // 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"]);

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

            // set whether the resulted image is transparent (has effect only when the output format is PNG)
            htmlToImageConverter.TransparentImage = (collection["dropDownListImageFormat"] == "PNG") ?
                        collection["checkBoxTransparentImage"].Count > 0 : false;

            // set triggering mode; for WaitTime mode set the wait time before convert
            switch (collection["dropDownListTriggeringMode"])
            {
                case "Auto":
                    htmlToImageConverter.TriggerMode = ConversionTriggerMode.Auto;
                    break;
                case "WaitTime":
                    htmlToImageConverter.TriggerMode = ConversionTriggerMode.WaitTime;
                    htmlToImageConverter.WaitBeforeConvert = int.Parse(collection["textBoxWaitTime"]);
                    break;
                case "Manual":
                    htmlToImageConverter.TriggerMode = ConversionTriggerMode.Manual;
                    break;
                default:
                    htmlToImageConverter.TriggerMode = ConversionTriggerMode.Auto;
                    break;
            }

            // convert to image
            byte[] imageBuffer = null;
            string imageFormatName = collection["dropDownListImageFormat"][0].ToLower();
            string imageFileName = String.Format("HtmlToImage.{0}", imageFormatName);

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

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

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

            // inform the browser about the binary data format
            string mimeType = imageFormatName == "jpg" ? "jpeg" : imageFormatName;

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

            return fileResult;
        }

        private ImageFormats GetSelectedImageFormat()
        {
            switch (m_formCollection["dropDownListImageFormat"])
            {
                case "PNG":
                    return ImageFormats.Png;
                case "JPG":
                    return ImageFormats.Jpeg;
                case "BMP":
                    return ImageFormats.Bmp;
                default:
                    return ImageFormats.Png;
            }
        }
    }
}

See Also

Other Resources