GrapeCity Documents for Imaging (GcImaging) is a high-performance imaging library that can create, load, modify, and save images in .NET Core applications with full support on Windows, macOS, and Linux. The library is a feature-rich API that can load popular image formats like, BMP, JPEG, TIFF, GIF, and PNG. It can apply advanced image processing techniques and save them back; read/write images, modify images (like rotate, crop, and resize), convert images, apply dithering, and thresholding effects on grayscale images; apply effects on RGB images, draw and fill graphics on images, draw advanced text with full font handling, text, paragraph formatting on images, apply advanced TIFF features, and much more.

With the v3 release, we now have the capability of converting HTML content to images.

Read the full Documents for Imaging release

You may want to render it to images for various reasons:

  • A company may have a standard HTML fragment that renders its logo along with other content. It may want to generate an image of the same to share it in the official documents as in Word, Excel, etc. This image can be used offline for a simple representation of the logo.
  • One may also want to take a snapshot of pricing details online. For example, airline prices with different departure and arrival times. This can help your users come back to the one they want, using the apt search criteria.

GcHtml Packages

GcHtml is based on the Chromium web browser, working in headless mode. The browser engine is provided as a part of GcHtml project, but in separate NuGet packages, one for each of the following platforms: Windows, Linux, and macOS. GcHtml currently works on Intel-based 64-bit processor architecture only. It doesn’t matter whether your .NET application is built for x86, x64, or AnyCPU platform target, the browser engine is always working in a separate process.

It consists of the following NuGet packages:

  1. GrapeCity.Documents.Html
  2. GrapeCity.Documents.Html.Linux.X64
  3. GrapeCity.Documents.Html.Mac.X64
  4. GrapeCity.Documents.Html.Windows.X64

GrapeCity.Documents.Html is always required. You need to add at least one of the platform-specific packages depending on your runtime platform. To support multiple platforms, two or all three packages can be added, and the correct platform-specific package will be automatically selected by GcHtml at runtime.

With GcHtml, you can render HTML content to JPEG and PNG images. You can also specify JpegSettings and PngSettings, based on the settings required to be made for each output file.

Broadly, there are two ways to render HTML to an image:

  1. DrawHtml method: It extends GcBitmapGraphics and allows the user to render an HTML text or page in an image. This allows inserting HTML fragments in images along with other content.

  2. DrawHtml method has two overloads:

bool GcBitmapGraphics.DrawHtml(string html, float x, float y, HtmlToImageFormat format, out SizeF size);
  • Draws an HTML page specified by an URI on GcBitmapGraphics, at a specified position:
bool GcBitmapGraphics.DrawHtml(Uri htmlUri, float x, float y, HtmlToImageFormat format, out SizeF size);

Here, HtmlToImageFormat class contains attributes for rendering HTML on a GcBitmapGraphics instance, using DrawHtml extension methods.

  1. GcHtmlRenderer class: It is used with one of its two constructors: the one that accepts Uri to the source HTML page and the other that accepts HTML code as a string. RenderToJpeg and RenderToPng methods of GcHtmlRenderer allow conversion of the source HTML to Image. It accepts the output file path as the first parameter. The second parameter (optional) is the JpegSettings or the PngSettings instance, which defines output image settings for the particular format, respectively.

HTML File to Image

Let's consider an e-commerce firm generates its invoices in HTML. These invoices are related to the customers’ transactions and can be rendered in separate images to generate a single report. All of the stakeholders can view the potential customers, and then analyze the data for quarterly sales targets.

To meet this requirement, one can generate images corresponding to the invoices.

The steps are as follows:

  1. Open Visual Studio and create a .Net Core Console application, by selecting the same from the templates.

  2. In your application, 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" (mandatory for HTML rendering) and "GrapeCity.Documents.Html.Windows.X64" (considering that you work on Windows platform only).

Note: While installing, you’ll receive two confirmation dialogs: ‘Preview Changes’ (if the "Show preview window" option setting for the package is checked) and ‘License Acceptance’, click ‘Ok’ and ‘I Agree’ respectively, to continue.

To use GcHtml on Linux, Chromium dependencies must be installed.

The following command installs the necessary packages on Ubuntu:

sudo apt-get update

sudo apt-get install libxss1 libappindicator1 libindicator7 libnss3-dev
  1. Add namespaces in Program.cs file:
using GrapeCity.Documents.Html;
using GrapeCity.Documents.Imaging;
using GrapeCity.Documents.Drawing;

  1. Write the sample code:
namespace GcImaging_HtmlContent
{
 class Program
 {
  static void Main(string[] args)
  {

//Create a GcHtmlRenderer instance in a using block
using (var re1 = new GcHtmlRenderer(File.ReadAllText("Invoice.html")))
 {
//Create a JpegSetting instance and set its related properties
JpegSettings jpegSettings1 = new JpegSettings();
jpegSettings1.DefaultBackgroundColor = System.Drawing.Color.White;
jpegSettings1.WindowSize = new Size(900, 1000);
//Finally, render the string to an image using RenderToJpeg method of GcHtmlRenderer
re1.RenderToJpeg("invoice.jpeg", jpegSettings1);
 }
  }
 }
}

Similarly, the string can be rendered in PNG format, using PngSettings instance and RenderToPng method.

Invoice.HTML

Invoice.JPEG

HTML String to Image

You can render an HTML string as an image, using the GcHtmlRenderer class' constructor that takes an HTML string as a parameter.

Follow steps (1) to (5) from above. Then, add the following code to the Main method in Program.cs:

//Create a variable containing the HTML code as string
var html = "<!DOCTYPE html>" +
"<html>" +
"<head>" +
"<style>" +
"p.round {" +
"font: 36px verdana;" +
"color: Red;" +
"border: 4px solid SlateBlue;" +
"border-radius: 16px;" +
"padding: 3px 5px 3px 5px;" +
"}" +
"</style>" +
"</head>" +
"<body>" +
"<p class='round'>Thank You for shopping with us!</p>" +
"<p class='round'>Hope to see you again soon.</p>" +
"</body>" +
"</html>";

//Create a GcHtmlRenderer instance in a using block, taking the string as its constructor parameter:
using (var re1 = new GcHtmlRenderer(html))
{
//Create a JpegSetting instance and set its related properties
JpegSettings jpegSettings1 = new JpegSettings();
jpegSettings1.DefaultBackgroundColor = System.Drawing.Color.White;
jpegSettings1.WindowSize = new Size(900, 1000);
//Finally, render the string to an image using RenderToJpeg method of GcHtmlRenderer
re1.RenderToJpeg("HTMLStringToImage.jpeg", jpegSettings1);
}

HTMLStringToImage

WebPage to Image

To share the "Help and Customer Services" a firm offers related to a product, it may decide to generate images from the web page and provide them to the customers over email. This can be used to draw attention towards the product and the services related to it.

Using Document Solution’s GcHtml package, this conversion can be carried out with ease.

Follow steps (1) to (5) from above. Thereafter, add the following code to the Main method in Program.cs:

var uri = new Uri(@"https://www.amazon.com/gp/help/customer/display.html/ref=hp_200127470_echo_show_img?nodeId=202138870");

//Create a GcHtmlRenderer instance in a using block
using (var re = new GcHtmlRenderer(uri))
{
//Create a JpegSetting instance to specify the output image settings for the JPEG format
JpegSettings jpegSettings = new JpegSettings();
jpegSettings.DefaultBackgroundColor = System.Drawing.Color.White;
jpegSettings.WindowSize = new Size(1000, 2000);

//Finally, render the string to an image using RenderToJpeg method of GcHtmlRenderer
re.RenderToJpeg("webpage.jpeg", jpegSettings);
}

Similarly, the web page can be rendered in PNG format, using PngSettings instance and RenderToPng method.

Webpage Preview

webpage.JPEG

Help | GcHtml Architecture | Demo

What do you think about the new features? Leave a comment below.

Try GrapeCity Documents for Imaging free for 30 days

Download the latest version of GrapeCity Documents for Imaging

Download Now!