Your First Application with Graphics Mill

This topic describes how to get started with Graphics Mill and provides step-by-step instructions on how to create a simple web application. For simplicity, this application implements loading an image, resizing and watermarking it, and then displaying it.

Image Processing

A central object in Graphics Mill is the bitmap, which contains pixels forming digital images. Usually, bitmaps are stored in files in different image formats, for example, your digital camera can save images to JPEG, which is very popular. Graphics Mill can load bitmaps from various image formats, save them to these formats, apply different transformations on bitmaps, and draw text, graphic primitives, or other images on them. You can draw on bitmaps with any pixel format supported by Graphics Mill , except for indexed formats. Even extended formats (16 bits per channel), CMYK, and formats with alpha channels are handled correctly.

Before working with image processing, we added the following namespaces to our application to make the code below more attractive:

C#
using Aurigma.GraphicsMill;
using Aurigma.GraphicsMill.Transforms;
using Aurigma.GraphicsMill.AdvancedDrawing;

Our imaging algorithm is comprised of 3 main operations with a bitmap: load the bitmap from a file, resize it, and then draw watermark text on it. Here is the complete code implementing this algorithm:

C#
private static Bitmap ResizeAndWatermark(string sourceImagePath, int size, string text)
{
    // Load an image from the specified file.
    var bitmap = new Bitmap(sourceImagePath);

    // Resize the image to the specified size.
    bitmap.Transforms.Resize(size, size, ResizeInterpolationMode.High, ResizeMode.Fit);

    // Draw watermark text.
    using (var graphics = bitmap.GetAdvancedGraphics())
    {
        var textToDraw = new PlainText(text, graphics.CreateFont("Calibri", bitmap.Height / 20), 
            new SolidBrush(Aurigma.GraphicsMill.RgbColor.White), graphics.Width - 1, graphics.Height - 1, 
            TextAlignment.Right);
        graphics.DrawText(textToDraw);
    }
    return bitmap;
}

Now, let us go through the individual operations to better understand them.

First, we load a bitmap from a file. This is a simple operation; you just specify a path to an image file via the Bitmap.#ctor(String) constructor and Graphics Mill does the whole job for you:

C#
var bitmap = new Bitmap(sourceImagePath);

After we have loaded the bitmap, we should resize it to the specified size using the Resize(Int32, Int32, ResizeInterpolationMode, ResizeMode) method, where the first two parameters are the image size (width and height), the third parameter is the resize quality, and the last one is how the algorithm resizes the bitmap to the specified size:

C#
bitmap.Transforms.Resize(size, size, ResizeInterpolationMode.High, ResizeMode.Fit);

If you want to learn about resize quality in detail, read the Interpolation Modes Comparison article. Let us pay more attention to the last argument. ResizeMode.Fit means that Graphics Mill builds a virtual rectangle with the specified width and height (in our case it is a square with the dimensions specified as size) and inscribes the image inside this boundary, preserving the image proportions.

The last operation is drawing a text watermark:

C#
using (var graphics = bitmap.GetAdvancedGraphics())
{
    var textToDraw = new PlainText(text, graphics.CreateFont("Calibri", bitmap.Height / 20),
        new SolidBrush(Aurigma.GraphicsMill.RgbColor.White), graphics.Width - 1, graphics.Height - 1,
        TextAlignment.Right);
    graphics.DrawText(textToDraw);
}

All drawing operations are built around the Graphics abstraction. The bitmap itself is storage for pixels and does not support any drawing operations. That is why we use Graphics to draw on the bitmap. If you want to learn how to draw on bitmaps in detail, read the Drawing section.

To create Graphics from the bitmap, use the Bitmap.GetAdvancedGraphics() method. The number of Graphics instances that we can create for the bitmap, is limited. Thus, you should wrap Graphics with the using section, because once the running program leaves this section, Graphics will be freed up.

The drawing algorithm itself is very simple. First, we created a PlainText object at the specified location with the specified Font, Brush, and TextAlignment settings. After this, we used the Graphics.DrawText(Text) method to draw the text object on the bitmap.

We have discussed the common image processing code; now, let us consider how to use it in Web applications.

A Web Application

  1. Create a new ASP.NET Empty Web Site (in Visual Studio 2010 menu File -> New -> Web Site...)

    Visual Studio Create New Web Site Dialog
  2. Add references to Graphics Mill assemblies. There are two ways to perform this:

    • Adding the Aurigma.GraphicsMill.dll assembly from the Graphics Mill installation folder. You can find this assembly in C:\Program Files\Aurigma\Graphics Mill 9 SDK\.Net 4.0\Binaries_xNN\ if you have .NET 4.0 or higher (NN stands for 64 or 86, depending on the target platform of your application). For more information, read Installation and Redistribution Notices.
    • Using NuGet package manager for .NET: open Tools -> NuGet Package Manager -> Package Manager Console in your Visual Studio and specify Install-Package Aurigma.GraphicsMill.Web.x86 or Install-Package Aurigma.GraphicsMill.Web.x64, according to the target platform of your application.

      If you prefer using the user interface for working with NuGet, you can install the package this way: open Tools -> NuGet Package Manager -> Manage NuGet Packages for Solution, enter Graphics Mill in the search field, and chose the appropriate package:

      Using NuGet package manager for .NET
  3. Add a new generic handler to the web site (for example, ResizeHandler.ashx) and implement its ProcessRequest(HttpContext) method as follows:

    C#
    public void ProcessRequest(HttpContext context)
    {
        int size = Convert.ToInt32(context.Request.QueryString["size"]);
        string text = context.Request.QueryString["text"];
    
        context.Response.Clear();
        context.Response.ContentType = "image/png";
    
        using (var result = ResizeAndWatermark(context.Server.MapPath(@"Koala.jpg"), size, text))
        {
            result.Save(context.Response.OutputStream, new Aurigma.GraphicsMill.Codecs.PngSettings());
        }
    
        context.Response.End(); 
    }
    
  4. Add a new page to the web site (for example, Default.aspx) and insert the following div in the desired position.

    ASP.NET
    <div>
        <img src="ResizeHandler.ashx?size=320&text=Graphics Mill" />
    </div>
    
  5. Run the application (menu Debug -> Start Without Debugging or CTRL+F5 shortcut). The page with the image you specified and processed in the last step will appear.

    Web Site in Browser

See Also

Reference

Manual