Documents for Imaging, .NET Edition Documentation
In This Topic
    Render HTML to Image
    In This Topic

    GcImaging library along with GcHtml library lets you easily render HTML content to Images. When you browse through the content on a website, you may want to capture images to incorporate them into a professional presentation. Sometimes, one may also want to take the snapshot of online pricing details. With a utility library like GcHtml,the user can conveniently render HTML content to high resolution images. With GcHtml, you can convert webpages, HTML strings or even URIs to different image formats (JPEG, PNG, BMP, TIFF and GIF).

    GcHtml is based on the industry standard Chrome web browser engine working in headless mode, offering advantage of rendering HTML to image on any platform - Windows, Linux and macOS. Currently, GcHtml works only on Intel-based 64-bit processor architecture. It doesn’t matter whether your .NET application is built for x64, x86 or AnyCPU platform target. The browser is always working in a separate process.

    The GcHtml library consists of platform dependent and platform independent NuGet packages. You can add a platform-dependent Html package depending on the platform you are working. Alternatively, you can add all the Html packages and let GcHtml automatically select the correct package at runtime.

    GcHtml NuGet Packages

    Description

    GrapeCity.Documents.Html

    The GrapeCity.Documents.Html package contains the following namespaces:

    • GrapeCity.Documents.Html namespace provides GcHtmlRenderer, PdfSettings, ImageSettings, PngSettings classes etc.
    • GrapeCity.Documents.Pdf namespace provides the GcPdfGraphicsExt and HtmltoPdfFormat classes.
    • GrapeCity.Documents.Drawing namespace provides GcGraphicsExt and HtmlToImageFormat class.
    GrapeCity.Documents.Html.Windows.X64 It is the interface unit and Chromium browser engine for 64-bit Windows platform.
    GrapeCity.Documents.Html.Mac.X64 It is the interface unit and browser engine for macOS platform.

    GrapeCity.Documents.Html.Linux.X64

    It is the interface unit and browser engine for 64-bit Linux platform.

    Note that to use GcHtml on Linux, Chromium dependencies must be installed. The following command installs the necessary packages on Ubuntu:

    Copy Code
    sudo apt-get update
    sudo apt-get install libxss1 libappindicator1 libindicator7 libnss3-dev
    

    Install GcHtml Package

    Refer the steps below to install GcHtml package in your project:

    1. Open Visual Studio and create a .Net Core Console application.

    2. Right-click Dependencies and select Manage NuGet Packages.

    3. With the Package source" set to Nuget website, search for GrapeCity.Documents.Imaging under the Browse tab and click Install.

    4. Similarly, install GrapeCity.Documents.Html and GrapeCity.Documents.Html.Windows.X64 (depending on the platform you are working).

      Note: During installation, you’ll receive two confirmation dialogs. Click OK in the Preview Changes dialog box and click I Agree in the License Acceptance dialog box to proceed installation.
    5. Once, the GcHtml package has been installed successfully, add the namespace in Program.cs file.

      C#
      Copy Code
      using GrapeCity.Documents.Html;
      using GrapeCity.Documents.Pdf;
      using GrapeCity.Documents.Drawing;
      
    6. Write the sample code.

    Render HTML Webpage as Image

    To render URI as an image, follow the steps below:

    1. Get the URI of the HTML webpage you wish to render.
    2. Configure image settings using the JpegSettings or PngSettings class, depending upon the image format.
    3. Convert the HTML page to JPEG/PNG image using the RenderToJpeg or RendertoPng method of the GcHtmlRenderer class.
    C#
    Copy Code
    class RenderHTML_AsImages
    {
        public void SaveURI_ToImage()
        {
            //Configure image settings
            var jpegSettings = new JpegSettings();
            jpegSettings.WindowSize = new Size(800, 800);
    
            //Save HTML Page to jpeg image 
            using (var htmlRenderer = new GcHtmlRenderer(new Uri("https://www.apple.com/in/")))
            {
                htmlRenderer.RenderToJpeg("HTMLPage.jpeg", jpegSettings);
    
                //Uncomment to export to png
                //imageRenderer.RenderToPng("Sample.png");
            }
        }
    

    Back to Top

    The resulting image is shown below:

    Note: In order to render an HTML page to image, the fonts used on that page should be already
    installed on your system.

    Render HTML Strings as Image

    To render HTML string as an image, follow the steps below:

    1. Add the HTML string you wish to render.
    2. Configure image settings using the JpegSettings or PngSettings class, depending upon the image format.
    3. Convert HTML string to JPEG or PNG using the RenderToPng or RenderToJpeg method of GcHtmlRenderer class.
    C#
    Copy Code
    public void SaveHTMLString_ToImage()
    {
        //Configure image settings
        var pngSetting = new PngSettings();
        pngSetting.WindowSize = new Size(200, 200);
    
        //Save HTML string to png image 
        var html = "<html><body><h1>My First Heading</h1><p>My first paragraph.</p></body></html>";
        using (var htmlRenderer = new GcHtmlRenderer(html))
        {
            htmlRenderer.RenderToPng("HTMLString.png", pngSetting);
    
            //Uncomment to export to jpeg
            //imageRenderer.RenderToJpeg("Sample.jpeg");
        }
    }
    

    Back to Top

    The resulting image is shown below:

    Render HTML Table as Image

    To render HTML table as an image, follow the steps below:

    1. Create the HTML Table.
    2. Configure image settings using the JpegSettings or PngSettings class, depending upon the image format.
    3. Convert this HTML table to JPEG or PNG using the RenderToPng or RenderToJpeg method of GcHtmlRenderer class.
    C#
    Copy Code
    public void SaveTable_ToImage()
    {
        //Create HTML Table
        var htmlTable = "<table border='1'><tr><th>Items</th><th>Quantity</th>" +
              "</tr><tr><td>Laptops</td><td>30</td></tr><tr><td>Chromebooks</td>" +
              "<td>12</td></tr></table>";
    
        //Configure image settings
        var jpegSettings = new JpegSettings();
        jpegSettings.WindowSize = new Size(200, 200);
    
        //Save HTML Table to image
        using (var htmlRenderer = new GcHtmlRenderer(htmlTable))
        {
            htmlRenderer.RenderToJpeg("HTMLTable.jpeg", jpegSettings);
    
            //Uncomment to export HTML table to PNG image
            //htmlExport.RenderToPng("Index.png");
        }
    }
    

    Back to Top

    The resulting image is shown below:

    Render HTML Files or Strings to GcBitmap

    Apart from JPEG and PNG image formats, the user can also render HTML content to BMP, GIF and TIFF. This can be done by saving the HTML file or string to a bitmap using the RenderToGcBitmap method of GcHtmlRenderer class.

    To render HTML file or string to GcBitmap, follow the steps below:

    1. Input the sample HTML content.
    2. Initialize an instance of the GcBitmap class.
    3. Save this HTML content to an existing GcBitmap using the RenderToGcBitmap method of GcHtmlRenderer class.
    4. Save this bitmap image in the desired image format. For this, use SaveAsBmp, SaveAsGif and SaveAsTiff methods of the GcBitmap class.
    C#
    Copy Code
    public void SaveHTML_ToGcBitmap()
    {
        //Sample HTML content
        var html = "<html><body><h1>My First Heading</h1><p>My first paragraph.</p></body></html>";
    
        //Initialize GcBitmap
        var bmp = new GcBitmap(550, 350, true, 96, 96);
    
        //Save HTML to GcBitmap
        using (var htmlRenderer = new GcHtmlRenderer(html))
        {
            htmlRenderer.RenderToGcBitmap(bmp, new HtmlToImageFormat(true)
            { WindowSize = new Size(800, 800) });
            bmp.SaveAsBmp("HTMLGcBitmap.bmp");
        }
    }
    

    Back to Top

    Draw HTML String or Page on GcGraphics at Specified Position

    The user can also render HTML content to image using the DrawHtml method of GcGraphicsExt class. The DrawHtml method allows to convert an HTML text or page into an image. It also allows to insert HTML fragments in images along with other content. Moreover, the DrawHtml method has two overloads. The GcBitmapGraphics.DrawHtml (string html, float x, float y, HtmlToImageFormat format, out SizeF size) can be used to draw an HTML text on GcBitmapGraphics at a specified position, while the GcBitmapGraphics.DrawHtml (Uri htmlUri, float x, float y, HtmlToImageFormat format, out SizeF size) can be used to draw an HTML page specified by an URI on GcBitmapGraphics at a specified position.

    To render HTML string/page on GcBitmapGraphics at specified position, follow the steps below:

    1. Create an instance of GcBitmap class.
    2. Configure the image settings using the HtmlToImageFormat class.
    3. Save the HTML page or string on GcBitmapGraphics using the DrawHtml extension method of GcGraphicsExt class.
    4. Call the SaveAsJpeg, SaveAsPng, SaveAsGif, SaveAsBmp and SaveAsTiff methods of GcBitmap class.
    C#
    Copy Code
    public void DrawHTML_GcGraphics()
    {
        //Create an instance of GcBitmap class
        var bmp = new GcBitmap(1000, 1000, true, 96, 96);
    
        //Configure image settings
        HtmlToImageFormat htmlToImage = new HtmlToImageFormat(true)
        { WindowSize = new Size(500, 500) };
    
        htmlToImage.DefaultBackgroundColor = Color.White;
    
        //Draw HTML Page on GcBitmapGraphics
        using (var g = bmp.CreateGraphics(Color.LightBlue))
        {
            SizeF addSize = new SizeF();
            g.DrawHtml(new Uri("https://www.apple.com/in/"), 10, 10, htmlToImage, out addSize);
            bmp.SaveAsJpeg("DrawHtml.jpeg");
        }
    

    Back to Top

    The resulting image is shown below: