Documents for Imaging .NET Edition | GCDocuments
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.Windows.X64

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

    Note: Due to Azure Windows AppService and Azure Functions limitations, GcHtml is not supported in these environments.

    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. Apply GcImaging license to GcHtmlRenderer class of GcHtml library to convert HTML to image. Without proper license, the count is limited to only 5 image conversions. The license can be applied in one of the following ways as shown below:


      • To license all the instances
        GcHtmlRenderer.SetGcImagingLicenseKey("key");
                   
    7. 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:

    Webpage displaying IPhone 11 Pro being rendered as image in GcImaging

    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:

    HTML string with different formatting being rendered as image

    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:

    HTML table of items and their quantities being rendered as image

    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 GcBitmapGraphicsExt 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 DrawHtmlextension method of GcBitmapGraphicsExt 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:Convert HTML page of Apple website to an image using GcImaging

     

    For more information about rendering HTML to Image using GcImaging, see GcImaging sample browser.