Convert HTML to PNG | C#

PNG is one of the most used image file formats. It supports lossless image compression that makes it popular among its users. Converting HTML files to the PNG image may be required, for example, if you want to add a web page in a PowerPoint presentation, insert it on a blog for your readers, or send by e-mail. With Aspose.HTML, you can convert HTML to PNG format programmatically with full control over a wide range of conversion parameters.

In this article, you find information on how to convert HTML to PNG by using ConvertHTML() methods of the Converter class, and how to apply ImageSaveOptions and ICreateStreamProvider parameters.

Online HTML Converter

You can check the Aspose.HTML API functionality and convert HTML in real-time. Please load HTML from the local file system, select the output format and run the example. In the example, the save options are set by default. You will immediately receive the result as a separate file.

Code example in C# to convert document formats
Input file
Upload a file you want to convert
Output format
Select the target format

If you want to convert HTML to PNG programmatically, please see the following C# code examples.

HTML to PNG by a single line of code

The static methods of the Converter class are primarily used as the easiest way to convert an HTML code into various formats. You can convert HTML to PNG in your C# application literally with a single line of code!

using System.IO;
using Aspose.Html.Converters;
using Aspose.Html.Rendering.Image;
using Aspose.Html.Saving;
...
    // Invoke the ConvertHTML method to convert the HTML code to PNG image           
    Converter.ConvertHTML(@"<h1>Convert HTML to PNG!</h1>", ".", new ImageSaveOptions(), Path.Combine(OutputDir, "convert-with-single-line.png"));

Convert HTML to PNG

Converting a file to another format using the ConvertHTML() method is a sequence of operations among which document loading and saving:

  1. Load an HTML file using the HTMLDocument class.
  2. Create a new ImageSaveOptions object. By default, the Format property is PNG .
  3. Use the ConvertHTML() method of the Converter class to save HTML as a PNG image. You need to pass the HTMLDocument , ImageSaveOptions , and output file path to the ConvertHTML() method to convert HTML to PNG.

Please take a look over the following C# code snippet which shows the process of converting HTML to PNG using Aspose.HTML for .NET.

using System.IO;
using Aspose.Html;
using Aspose.Html.Converters;
using Aspose.Html.Rendering.Image;
using Aspose.Html.Saving;
...
    // Prepare a path to a source HTML file
    string documentPath = Path.Combine(DataDir, "nature.html");

    // Prepare a path for converted file saving 
    string savePath = Path.Combine(OutputDir, "nature-output.png");
    
    // Initialize an HTML document from the file
    using var document = new HTMLDocument(documentPath);
    
    // Initialize ImageSaveOptions 
    var options = new ImageSaveOptions(ImageFormat.Png);
    
    // Convert HTML to PNG
    Converter.ConvertHTML(document, options, savePath);

Save Options

Aspose.HTML allows converting HTML to PNG using default or custom save options. ImageSaveOptions usage enables you to customize the rendering process; you can specify the image format , page size , margins , CSS media-type , etc.

Property Description
Compression Sets Tagged Image File Format (TIFF) Compression . By default, this property is LZW .
CSS Gets a CssOptions object which is used for configuration of CSS properties processing.
Format Sets the ImageFormat (JPG, PNG, BMP, TIFF, or GIF). By default, this property is PNG .
BackgroundColor This property sets the color that will fill the background. By default, this property is Transparent.
PageSetup This property gets a page setup object and uses it for configuration output page-set.
HorizontalResolution Sets horizontal resolution for output images in pixels per inch. The default value is 300 dpi.
VerticalResolution Sets vertical resolution for output images in pixels per inch. The default value is 300 dpi.
SmoothingMode This property sets the rendering quality for this image. Available values are Invalid, Default, HighSpeed, HighQuality, None, and AntiAlias.
Text Gets a TextOptions object which is used for configuration of text rendering.

Convert HTML to PNG using ImageSaveOptions

To convert HTML to PNG with ImageSaveOptions specifying, you should follow a few steps:

  1. Load an HTML file using one of the HTMLDocument() constructors of the HTMLDocument class.
  2. Create a new ImageSaveOptions object and specify save options. By default, the Format property is PNG .
  3. Use the ConvertHTML() method of the Converter class to save HTML as a JPG image. You need to pass the HTMLDocument, ImageSaveOptions, and output file path to the ConvertHTML() method to convert HTML to PNG.

The following C# code snippet shows how to convert HTML to PNG using custom save options:

using System.IO;
using Aspose.Html;
using Aspose.Html.Converters;
using Aspose.Html.Rendering.Image;
using Aspose.Html.Saving;
using System.Drawing;
using System.Drawing.Drawing2D;
...
    // Prepare a path to a source HTML file
    string documentPath = Path.Combine(DataDir, "nature.html");

    // Prepare a path for converted file saving 
    string savePath = Path.Combine(OutputDir, "nature-output-options.png");
    
    // Initialize an HTML document from the file
    using var document = new HTMLDocument(documentPath);
    
    // Initialize ImageSaveOptions            
    var options = new ImageSaveOptions()
    {
        SmoothingMode = SmoothingMode.Default,
        HorizontalResolution = 100,
        VerticalResolution = 100,
        BackgroundColor = Color.Beige
    };
    
    // Convert HTML to PNG
    Converter.ConvertHTML(document, options, savePath);

The ImageSaveOptions() constructor initializes an instance of the ImageSaveOptions class that is passed to ConvertHTML() method. The ConvertHTML() method takes the document, options, output file path savePath and performs the conversion operation.

In the above example, we add:

  • BackgroundColor property that sets the color that will fill the background. The default BackgroundColor is Transparent;
  • HorizontalResolution and VerticalResolution properties that set horizontal/vertical resolution for output images in pixels per inch. By default, these properties are 300 dpi;
  • SmoothingMode property that sets the rendering quality for this image.

The ImageSaveOptions class provides numerous properties that give you full control over a wide range of parameters and improve the process of converting HTML to Image formats. Among these properties, SmoothingMode that enables you to set the rendering quality for the image. Available values are Invalid, Default, HighSpeed, HighQuality, None, and AntiAlias. You can select any value, considering the advantages and disadvantages of each one.

Output Stream Providers

If it is required to save files in the remote storage (e.g., cloud, database, etc.) you can implement the ICreateStreamProvider interface to have manual control over the file creating process. This interface is designed as a callback object to create a stream at the beginning of the document/page (depending on the output format) and release the early created stream after rendering the document/page.

The example below shows how to implement and use your own MemoryStreamProvider in the application:

using System.IO;
using System.Collections.Generic;
...
    class MemoryStreamProvider : Aspose.Html.IO.ICreateStreamProvider
    {
        // List of MemoryStream objects created during the document rendering
        public List<MemoryStream> Streams { get; } = new List<MemoryStream>();

        public Stream GetStream(string name, string extension)
        {
            // This method is called when only one output stream is required, for instance for XPS, PDF or TIFF formats.
            MemoryStream result = new MemoryStream();
            Streams.Add(result);
            return result;
        }
    
        public Stream GetStream(string name, string extension, int page)
        {
            // This method is called when the creation of multiple output streams are required. For instance, during the rendering HTML to list of image files (JPG, PNG, etc.)
            MemoryStream result = new MemoryStream();
            Streams.Add(result);
            return result;
        }
    
        public void ReleaseStream(Stream stream)
        {
            //  Here you can release the stream filled with data and, for instance, flush it to the hard-drive
        }
    
        public void Dispose()
        {
            // Releasing resources
            foreach (var stream in Streams)
                stream.Dispose();
        }
    }

using System.IO;
using Aspose.Html;
using System.Linq;
using Aspose.Html.Converters;
using Aspose.Html.Rendering.Image;
using Aspose.Html.Saving;
...
    // Create an instance of MemoryStreamProvider
    using var streamProvider = new MemoryStreamProvider();

    // Initialize an HTML document
    using var document = new HTMLDocument(@"<h1>Convert HTML to PNG File Format!</h1>", ".");
    
    // Convert HTML to PNG using the MemoryStreamProvider
    Converter.ConvertHTML(document, new ImageSaveOptions(ImageFormat.Png), streamProvider);
    
    // Get access to the memory stream that contains the result data
    var memory = streamProvider.Streams.First();
    memory.Seek(0, SeekOrigin.Begin);
    
    // Flush the result data to the output file
    using (FileStream fs = File.Create(Path.Combine(OutputDir, "stream-provider.png")))
    {
        memory.CopyTo(fs);
    }

Text “Banner HTML to PNG Converter”