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

To process relatively small images, you can use bitmaps. 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.

First, you can add the following namespaces to our application to make the code more attractive.

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

The following imaging algorithm comprises three 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(RgbColor.White), graphics.Width - 1, graphics.Height - 1, 
            TextAlignment.Right);
        graphics.DrawText(textToDraw);
    }
    return bitmap;
}

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.

Here, we show the 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.

  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 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