Capturing Web-Pages With C# (.NET)

NOTE: This tutorial applies to version 1.6.x of Awesomium. Please get the latest Awesomium.NET SDK (v1.7.x) from here and study the included samples.

Also check our new Awesomium.NET Wiki

Introduction

In this tutorial, we’ll show you how to create a simple application using AwesomiumSharp from the Awesomium [v1.6.2] SDK.

Checklist

Creating our Application

Below are the steps to create a basic application that uses Awesomium and add all the necessary references and files to debug and deploy your application:

  1. Follow the steps described here to Install and Build AwesomiumSharp
  2. Create a new project for a C# Console Application by clicking File -> New -> Project… and name it: AwesomiumSharpBasic

    Creating C# Console Project

    Creating C# Console Project

  3. Follow the steps described here to Add a Reference to AwesomiumSharp
  4. Follow the steps described here to Add the necessary Awesomium files to your Project and make sure that they are properly deployed with your application
  5. Finally, make sure that you set the Platform target property of your project to x86 (instead of x64 or AnyCPU). See how to do this here.

Building our basic program

Lets add some code to our application. Open the Program.cs file and add the highlighted code:

using System;
using AwesomiumSharp;
using System.Threading;
using System.Diagnostics;

namespace AwesomiumSharpBasic
{
    class Program
    {
        static void Main( string[] args )
        {
            // Display some informative message. Loading the page
            // may  take a while depending on your internet
            // connection speed.
            Console.WriteLine( "Getting a 1024x768 snapshot" +
                "of http://www.awesomium.com ..." );

            // Create a WebView.
            // WebView implements IDisposable. You can dispose and
            // destroy the view by calling WebView.Close().
            // Here we demonstrate wrapping it in a using statement.
            using ( WebView webView =
                    WebCore.CreateWebView( 1024, 768 ) )
            {
                // Variable used to announce
                // that the page has loaded.
                bool finishedLoading = false;

                // Load a page in the view.
                webView.LoadURL( "http://www.awesomium.com" );
                // Handle the LoadCompleted event to monitor
                // page loading.
                webView.LoadCompleted += ( sender, e ) =>
                {
                    finishedLoading = true;
                };

                // Wait for the page to load.
                while ( !finishedLoading )
                {
                    Thread.Sleep( 100 );
                    // WebCore provides an Auto-Update feature
                    // for UI applications. A console application
                    // has no UI and no synchronization context
                    // so we need to manually call Update here.
                    WebCore.Update();
                }
            }
            // Shut down Awesomium before exiting.
            WebCore.Shutdown();
        }
    }
}

If you have ever used AwesomiumSharp before, you are now probably wondering: “Hey! Aren’t we supposed to initialize the WebCore first?”

–In AwesomiumSharp, the WebCore will automatically be initialized using default configuration settings, when the first view is created.

Now, that bit of code isn’t very exciting– it just creates a WebView, loads a URL into it, waits for it to finish loading, and then shuts it all down.

Rendering to an Image

You’ll notice that if you run that bit of code, you won’t see anything. Let’s talk about that— Awesomium is a windowless web-page renderer, that basically means that if you want to actually see a web-page on your screen, you’ll need to display it yourself (which is a good thing, it gives you the freedom to display it any way you want).

Let’s render our WebView to a pixel buffer (basically a bucket that will store our pixels in memory) and then save that buffer to a PNG file:

                // Wait for the page to load.
                while ( !finishedLoading )
                {
                    Thread.Sleep( 100 );
                    // WebCore provides an Auto-Update feature
                    // for UI applications. A console application
                    // has no UI and no synchronization context
                    // so we need to manually call Update here.
                    WebCore.Update();
                }

                // Render to a pixel buffer and save the buffer
                // to a .png image.
                webView.Render().SaveToPNG( "result.png", true );
            }

            // Start the application associated with .png files
            // and display the file.
            Process.Start( "result.png" );

            // Shut down Awesomium before exiting.
            WebCore.Shutdown();

Now lets Press Debug or F5 again to run our application.

AwesomiumSharp will:

  • Render an image of http://www.awesomium.com
  • Save the image to result.png
  • Open it using the application associated with .png files

The created image will be located in VSProjects\AwesomiumSharpBasic\AwesomiumSharpBasic\bin\Debug

Snapshot of http://www.awesomium.com

Snapshot of http://www.awesomium.com

Hey, not bad for just a couple lines of code!

Getting Rid of Scrollbars

Sometimes, you’ll find some sites always display scrollbars (despite your best efforts at resizing the WebView). We need to figure out how to get rid of scrollbars.

The WebCore is super-configurable, one of its options allows you to define the global CSS for all WebViews. Let’s set some CSS that will make all our scrollbars invisible.

Add this constant to the top of your Program class:

const string SCROLLBAR_CSS = "::-webkit-scrollbar { visibility: hidden; }";

Now let’s add a call to WebCore.Initialize to our Main method:

            // Display some informative message. Loading the page
            // may  take a while depending on your internet
            // connection speed.
            Console.WriteLine( "Getting a 1024x768 snapshot" +
                "of http://www.awesomium.com ..." );

            // We demonstrate an easy way to hide the scrollbars by providing
            // custom CSS. Read more about how to style the scrollbars here:
            // http://www.webkit.org/blog/363/styling-scrollbars/.
            WebCore.Initialize( new WebCoreConfig()
            {
                CustomCSS = SCROLLBAR_CSS
            } );

            // Create a WebView.
            // WebView implements IDisposable. You can dispose and
            // destroy the view by calling WebView.Close().
            // Here we demonstrate wrapping it in a using statement.
            using ( WebView webView =
                    WebCore.CreateWebView( 1024, 768 ) )

Just consider that this setting is global. If you want to apply a similar effect for single pages, you can add the following code to your WebView.DomReady event handler:

webView.ExecuteJavascript(
    "document.documentElement.style.overflow = 'hidden';");

Now let’s Press Debug or F5 once again.

Snapshot of http://www.awesomium.com without Scrollbars

Snapshot of http://www.awesomium.com without Scrollbars

Much better isn’t it?

Conclusion

You should now have a pretty good idea how to capture web-pages using AwesomiumSharp.

For more information: http://support.awesomium.com

If you liked this tutorial or have any suggestions, let me know below!

Also read...

Comments

  1. Lines 15 and 30 (of original document before getting rid of scrollbars):
    Don’t actually type “<a class="linkclass""! I did it at first, escaped the quotes, and I received a blank PNG file at the end. I think the code highlighter that the post utilizes added the HTML code to the link.

    Line 15 should actually read:
    Console.WriteLine( "Getting a 1024×768 snapshot of http://www.awesomium.com…" );

    and Line 30:
    webView.LoadURL( "http://www.awesomium.com&quot; );

    Hope that helps; my knowledge of C# is pretty basic though.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>