Convert HTML to Raster Image

Winnovative HTML to PDF Converter for .NET Documentation

Winnovative HTML to PDF Converter 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 BMP 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. If the page requires authentication or if you are using a proxy server to access Internet then you have to set the converter properties accordingly as described in documentation. The method you can use in this case is HtmlToImageConverterConvertUrlToImageTiles(String)
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 HtmlToImageConverterConvertHtmlToImageTiles(String, String)

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. When the browser window width is changed the HTML content displayed inside the window can have a different layout and something similar happens when you change the HTML Viewer width of the converter. At a given viewer width, the converter will capture by default the whole height of the HTML content, but you can set the HTML Viewer height to capture only the top part of the HTML page
HTML Viewer Height. This option is the equivalent in converter of the browser window height and can be used to limit the conversion to the top part of the HTML page. If this property is not set the entire page will be converted. The property you can set in your code to control the browser window height is HtmlToImageConverterHtmlViewerHeight

Image Options

Image Format. This option allows you select the output image format. You can choose between PNG, JPG and BMP. You can choose the image frmat when you save an image tile of System.DrawingImage type to a file or stream
Transparent Background. This option allows you choose if the image background is transparent or not. This option has effect only when you save the image tile of System.DrawingImage type to PNG image. The property you can set in your code to background transparency is HtmlToImageConverterTransparentBackground

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 Raster Image

Copy

protected void convertToImageButton_Click(object sender, EventArgs e)
{
    // 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 = "fvDh8eDx4fHg4P/h8eLg/+Dj/+jo6Og=";

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

    // 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 (htmlViewerHeightTextBox.Text.Length > 0)
        htmlToImageConverter.HtmlViewerHeight = int.Parse(htmlViewerHeightTextBox.Text);

    // Set if the created image has a transparent background
    htmlToImageConverter.TransparentBackground = SelectedImageFormat() == System.Drawing.Imaging.ImageFormat.Png ? transparentBackgroundCheckBox.Checked : false;

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

    // 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 (conversionDelayTextBox.Text.Length > 0)
        htmlToImageConverter.ConversionDelay = int.Parse(conversionDelayTextBox.Text);

    System.Drawing.Image[] imageTiles = null;

    if (convertUrlRadioButton.Checked)
    {
        string url = urlTextBox.Text;

        // Convert the HTML page given by an URL to a set of Image objects
        imageTiles = htmlToImageConverter.ConvertUrlToImageTiles(url);
    }
    else
    {
        string htmlString = htmlStringTextBox.Text;
        string baseUrl = baseUrlTextBox.Text;

        // Convert a HTML string with a base URL to a set of Image objects
        imageTiles = htmlToImageConverter.ConvertHtmlToImageTiles(htmlString, baseUrl);
    }

    // Save the first image tile to a memory buffer

    System.Drawing.Image outImage = imageTiles[0];

    // Create a memory stream where to save the image
    System.IO.MemoryStream imageOutputStream = new System.IO.MemoryStream();

    // Save the image to memory stream
    outImage.Save(imageOutputStream, SelectedImageFormat());

    // Write the memory stream to a memory buffer
    imageOutputStream.Position = 0;
    byte[] outImageBuffer = imageOutputStream.ToArray();

    // Close the output memory stream
    imageOutputStream.Close();

    // Send the image as response to browser

    string imageFormatName = imageFormatComboBox.SelectedValue.ToLower();

    // Set response content type
    Response.AddHeader("Content-Type", "image/" + (imageFormatName == "jpg" ? "jpeg" : imageFormatName));

    // Instruct the browser to open the image file as an attachment or inline
    Response.AddHeader("Content-Disposition", String.Format("attachment; filename={0}; size={1}", "HTML_to_Image." + imageFormatName, outImageBuffer.Length.ToString()));

    // Write the image buffer to HTTP response
    Response.BinaryWrite(outImageBuffer);

    // End the HTTP response and stop the current page processing
    Response.End();
}

Protected Sub convertToImageButton_Click(ByVal sender As Object, ByVal e As EventArgs)
    ' Create a HTML to Image converter object with default settings
    Dim htmlToImageConverter As 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 = "fvDh8eDx4fHg4P/h8eLg/+Dj/+jo6Og="

    ' Set HTML Viewer width in pixels which is the equivalent in converter of the browser window width
    htmlToImageConverter.HtmlViewerWidth = Integer.Parse(htmlViewerWidthTextBox.Text)

    ' 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 htmlViewerHeightTextBox.Text.Length > 0 Then
        htmlToImageConverter.HtmlViewerHeight = Integer.Parse(htmlViewerHeightTextBox.Text)
    End If

    ' Set if the created image has a transparent background
    htmlToImageConverter.TransparentBackground = If(SelectedImageFormat() Is System.Drawing.Imaging.ImageFormat.Png, transparentBackgroundCheckBox.Checked, False)

    ' Set the maximum time in seconds to wait for HTML page to be loaded 
    ' Leave it not set for a default 60 seconds maximum wait time
    htmlToImageConverter.NavigationTimeout = Integer.Parse(navigationTimeoutTextBox.Text)

    ' 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 conversionDelayTextBox.Text.Length > 0 Then
        htmlToImageConverter.ConversionDelay = Integer.Parse(conversionDelayTextBox.Text)
    End If

    Dim imageTiles() As System.Drawing.Image = Nothing

    If convertUrlRadioButton.Checked Then
        Dim url As String = urlTextBox.Text

        ' Convert the HTML page given by an URL to a set of Image objects
        imageTiles = htmlToImageConverter.ConvertUrlToImageTiles(url)
    Else
        Dim htmlString As String = htmlStringTextBox.Text
        Dim baseUrl As String = baseUrlTextBox.Text

        ' Convert a HTML string with a base URL to a set of Image objects
        imageTiles = htmlToImageConverter.ConvertHtmlToImageTiles(htmlString, baseUrl)
    End If

    ' Save the first image tile to a memory buffer

    Dim outImage As System.Drawing.Image = imageTiles(0)

    ' Create a memory stream where to save the image
    Dim imageOutputStream As New System.IO.MemoryStream()

    ' Save the image to memory stream
    outImage.Save(imageOutputStream, SelectedImageFormat())

    ' Write the memory stream to a memory buffer
    imageOutputStream.Position = 0
    Dim outImageBuffer() As Byte = imageOutputStream.ToArray()

    ' Close the output memory stream
    imageOutputStream.Close()

    ' Send the image as response to browser

    Dim imageFormatName As String = imageFormatComboBox.SelectedValue.ToLower()

    ' Set response content type
    Response.AddHeader("Content-Type", "image/" & (If(imageFormatName = "jpg", "jpeg", imageFormatName)))

    ' Instruct the browser to open the image file as an attachment or inline
    Response.AddHeader("Content-Disposition", String.Format("attachment; filename={0}; size={1}", "HTML_to_Image." & imageFormatName, outImageBuffer.Length.ToString()))

    ' Write the image buffer to HTTP response
    Response.BinaryWrite(outImageBuffer)

    ' End the HTTP response and stop the current page processing
    Response.End()
End Sub