Telerik blogs

Have your customers ever asked you to provide a drawing functionality in your web applications? Have they expressed a desire to be able to manipulate the colors of the edited images? If so – we are glad to announce that all of this attractive functionality is now possible with the Telerik’s Image Editor for ASP.NET AJAX!

The Q1 2013 release of the Telerik’s Controls for ASP.NET AJAX was packed with a lot of features and the Image Editor control also has its share of improvements and additions. This time we added support for drawing and a few more filters.



Drawing

Drawing in the Image Editor leverages the canvas tag capabilities to create graphics and geometry. We started with basic tools like drawing a line, rectangle, circle and pencil (free-hand).

The mere fact that drawing is now part of the Image Editor starts a new area of extending the functionality of the control.  After the humble start of just drawing shapes, we will continue with the ability to change them further by resizing and moving them around the Image Editor canvas until we have created a full-features palette of drawing tools so that you can freely express your artistic side.

Drawing approach

Using any of the newly added drawing tools from our ASP.NET Image Editor control, you will see that the result is geometry with smooth lines. Using this feature feels natural on the computer. The user utilizes the mouse or fingers for touch enabled devices to draw the respective figure. The drawing tool will just follow your command.

Drawing with the pencil tool or drawing lines and rectangles is very easy to imagine from an UX point of view. Using the pencil will draw on every pixel the user passes through. The line and rectangle are started with the first touch to the surface or mouse down event and will end when the contact with the canvas has finished. The difficult question is how to draw a circle. Well, we decided to keep it simple – a circle is described by its center and a radius. The center is determined when the drawing starts and the radius is the distance between the start and end position of the drawing. Now is the time to give the drawing a try - http://demos.telerik.com/aspnet-ajax/imageeditor/examples/drawing/defaultcs.aspx.

Image Editor drawing Functionality

Implementation

There is absolutely no magic behind the drawing implementation of the Image Editor. The magic lies with the canvas tag. We created an abstraction on top of it that we use to execute drawing methods.  The drawing itself happens not on the main editable canvas, but on another canvas so that the original pixels are not changed while drawing. That other canvas we can call the drawing canvas. Once the drawing has been done, the drawing canvas is merged with the main canvas and the drawn geometry becomes part of the editable canvas. That separation allows the resizing of the line, rectangle and circle while drawing is in progress.

The connection between the user interaction and the drawing commands over the drawing canvas are mediated through our respective Tools classes. They manage the drawing and make sure that it works x-browser and on touch-enabled devices.

Creating such an abstraction will help us immensely when we add new tools or expand the current functionality with more options to control the drawing before it is merged with the main canvas.
 

Filters

Along with the ability to draw geometries through the graphics API, the canvas context offers a way to manipulate each pixel individually. Utilizing this functionality of the canvas object, the Telerik’s Image Editor for ASP.NET AJAX offers also the ability to apply different filters to the edited image.

Currently, the control has five filters that allow you to edit the loaded image in a variety of ways:

  • InvertColors - creates the negative of the rendered image by subtracting the color components of the pixel from 255, thus leaving only the negative color value for the pixel
  • BrightnessContrast – allows the user to control the brightness (level of light) and contrast of the image
  • Greyscale – decolorizes the image so each of its pixels would have red, green and blue channels with identical values.
  • Sepia – gives the edited image a nice, old-fashioned look
  • HueSaturation – allows the user to modify the saturation and hue (the color scheme) of the image.

Of course, this is only the beginning of the big-filter-implementation in our Image Editor control – we will continue with providing more and more interesting and useful filters, giving the users the ability to manipulate the images in the most desirable way. You could test by yourself the entire filter set in this demo page - http://demos.telerik.com/aspnet-ajax/imageeditor/examples/filters/defaultcs.aspx 



Implementation

The canvas is represented by a one dimensional array of values (vector) between 0-255, where each pixel is represented by a 4-tuple of neighboring elements in the combination RGBA (red, green, blue, alpha). The only thing that we do is to access the image data of the canvas object and to manipulate the red/green/blue channel of every pixel in it.

But how do the different filters work? It is nothing more than math. Every time when you divide, multiply or simply reduce some of the colors’ value in a pixel, the result is a brand new color. And this is what all filters’ logic relies on – we use different math expressions in the different filters, giving us the opportunity to control the appearance of each and every color.

How to implement a custom filter functionality

Let’s take a look over the way to implement a CustomGreyScale filter. There are plenty of different colors in every image and we have access to the RGB channel of every pixel in it. In order to receive a grey scale image, we will need to go through all the pixels, and assign one and the same value to every color channel, so none of the colors would be distinct. It doesn’t matter what the value would be – it depends on the developer’s preferences whether the image would be brighter or darker.

For the sake of implementing a custom GreyScale filter in the Image Editor, we could simply take the average of the colors in each pixel, following the steps bellow:

  1. Add a custom button to the Image Editor's toolbar:
    <telerik:RadImageEditor ID="RadImageEditor1" runat="server" ImageUrl="~/Images/canvasTest.jpg">
        <Tools>
            <telerik:ImageEditorToolGroup>
                <telerik:ImageEditorTool CommandName="CustomGreyscaleFilter" />
            </telerik:ImageEditorToolGroup>
        </Tools>
    </telerik:RadImageEditor>
  2. Create a CustomGreyscaleFilter class that implements the IPixelFilter interface:
    (function ($, $IE, $F, undefined) {
        $F.CustomGreyscaleFilter = function (options) { };
        $F.CustomGreyscaleFilter.prototype = {
            execute: function (pixelData) {
                var data = pixelData.data;
     
                for (var i = 0; i < data.length; i += 4) {
                    var average = (data[i] + data[i + 1] + data[i + 2])/3;
     
                    data[i  ] = average;
                    data[i+1] = average;
                    data[i+2] = average;
                }
            },
            get_name: function () { return "CustomGreyscaleFilter"; }
        };
        $F.CustomGreyscaleFilter.registerClass("Telerik.Web.UI.ImageEditor.Filters.CustomGreyscaleFilter", null, $F.IPixelFilter);
    })($telerik.$, Telerik.Web.UI.ImageEditor, Telerik.Web.UI.ImageEditor.Filters);

  3. Create an instance of the newly implemented class and pass it as an argument to the Image Editor's applyFilter() method (inside the command implementation of the filter):
    Telerik.Web.UI.ImageEditor.CommandList.CustomGreyscaleFilter = function (imageEditor, commandName, args) {
        var filter = new Telerik.Web.UI.ImageEditor.Filters.CustomGreyscaleFilter();
        imageEditor.applyFilter(filter);
    }



To draw a conclusion - we just provide the tools, you are the artist and you are the one that creates masterpieces. Decrease the brightness of the image, change its contrast, give it a nice old-fashioned look and decorate it with your own drawings – all of that is possible now. Just be creative and give flight to your imagination…


About the Author

Veselina Raykova

is a Support Officer in the ASP.NET AJAX division. In her work she is mainly responsible for RadImageEditor, RadFileExplorer and RadSplitter. Apart from work she enjoys photography, design and cooking.

Comments

Comments are disabled in preview mode.