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

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 HiQPdf.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 HiQPdf.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 HiQPdf.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 HiQPdf.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 HiQPdf.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 HiQPdf;

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;

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

            // 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
            System.Drawing.Image imageObject = null;
            string imageFormatName = collection["dropDownListImageFormat"][0].ToLower();
            string imageFileName = String.Format("HtmlToImage.{0}", imageFormatName);

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

                imageObject = htmlToImageConverter.ConvertUrlToImage(url)[0];
            }
            else
            {
                // convert HTML code
                string htmlCode = collection["textBoxHtmlCode"];
                string baseUrl = collection["textBoxBaseUrl"];

                imageObject = htmlToImageConverter.ConvertHtmlToImage(htmlCode, baseUrl)[0];
            }

            // get the image buffer in the selected image format
            byte[] imageBuffer = GetImageBuffer(imageObject);

            // the image object rturned by converter can be disposed
            imageObject.Dispose();

            // 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 byte[] GetImageBuffer(System.Drawing.Image imageObject)
        {
            // create a memory stream where to save the image
            System.IO.MemoryStream imageMemoryStream = new System.IO.MemoryStream();

            // save the image to memory stream
            imageObject.Save(imageMemoryStream, GetSelectedImageFormat());

            // get a copy of the image buffer to allow image disposing
            byte[] imageBuffer = new byte[imageMemoryStream.Length];
            Array.Copy(imageMemoryStream.GetBuffer(), imageBuffer, imageBuffer.Length);

            // close the memory stream
            imageMemoryStream.Close();

            return imageBuffer;
        }

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

See Also

Other Resources