ASP.Net Web Photo Editing Tool Using HTML 5

In my previous article “Web Painting Tool Using HTML 5 CANVAS in ASP.NET" I explained how to create a simple Web Painting tool using HTML5 and jQuery. This article explains how to create a simple web-based photo editing tool using HTML5, jQuery and ASP.NET.

This article shows the details of how to do the following.

1. Capture an image from a web camera (I used Webcam JS, you can download the script file from this link).
   
   Webcam JS is a JavaScript library for capturing images from a web camera and saving them as JPEG/PNG or any data URI format.
   
   I used this library to capture images from the web camera and display the captured image in the HTML 5 canvas for editing the photo, adding a smiley, text and send the final edited image by email.
   
2. Add Sticker: Add stickers, for example lSmiley's, flowers, and so on to our captured photo.
   
   
3. Add Border: Add a border to the captured photo.
   
   
4. Add Text: Add text to the captured photo.
   
   
5. Add Filters: Add filters to the captured photo, such as adding contrast, changing it to a Black & White photo, invert the color of the photo or convert to an original captured photo.
   
   
6. Save and Send to Email: The final edited photo can be saved to the application root folder and you can send the edited photo to an Email address.

7. Post Canvas Photo to Facebook. The Final Edited photo can be posted to Facebook.

Prerequisites

Visual Studio 2013 or Visual Studio 2010.

In the source code Zip file you can find both Visual Studio 2010 and Visual Studio 2013 Solutions. You can use any solution depending on your Visual Studio version.

WEB Camera (to capture your photo to edit and send to email).

Using the code

The main purpose is to make the program very simple and easy to use. All the functions have been well commented in the project. I have attached my sample program to this article for more details. Here we will see the procedure to create a photo editing tool using a HTML5 canvas.

HTML5: HTML5 is the new version of HTML. HTML5 has cross-platform support. That means that HTML5 can work in a PC, Tablet and a Smartphone. HTML5 should be started with a DOCTYPE, for example:

Som of the new features in HTML5 are CANVAS, AUDIO, VIDEO and so on.

CANVAS

CANVAS is the element for 2D drawings using JavaScript. The Canvas has methods such as drawing paths, rectangles, arcs, text and so on.

The Canvas element looks as in the following.

Reference for HTML5 canvas.

The Canvas is nothing but a container for creating graphics. To create 2D graphics we need to use JavaScript. We will see the details here in the code.

Step 1

Add References: Add an entire JavaScript library to your project to use the webcam capture. For webcam capture we need webcam.js, webcam.min.js and webcam.swf. You can download these files from here.



Step 2

To add the Webcam: Add the following code to initialize the web camera in your browser and display the web camera image.

To capture the image: In the Capture button client click event, call the method takePhoto(). In this method using the webcam.js snap method we will receive the image from the live webcam. I stored the obtained image to the global variable and called the init method to add this photo to the HTML5 Canvas tag.

Step 3

To add Webcam, create a Canvas ELEMENT and declare the global variables and initialize the Canvas in JavaScript. In the code I used comments to easily understand the declarations.

HTML Canvas Part

Your browser is not supporting HTML5 Canvas. Upgrade the browser to view this program or check it with Chrome or Firefox.

JavaScript Declaration Part

First add all the JavaScript references and styles to your ASP.NET page as in the following:

Declare all the variables necessary for photo editing. In each declaration I have added comments to explain its usage.

init() Method: init is important since for each button click this function will be called and pass the parameter for each function type. In this method I will create an object for the canvas and this canvas object will be used in all other functions. Here for example the DrawType will be DrawImage, DrawText, DrawBorder, Place Photo as BG and Filter Effects and the Imagename parameter will be used to pass each sticker image name and so on. In this init method I will create Mouse events such as Mousedown, Mousemove and MouseUp to add a sticker, move a sticker, resize a sticker and so on.

Add Captured Photo to canvas

For example, to add the captured photo to the canvas we call the takePhoto method.

We have already seen that in takePhoto we store the captured photo to a global image variable.

In this method I called init('BG', '') and in the init method I will check the DrawType = 'BG'. If it's true then I will draw the captured image to the canvas as in the following.

Add border/text/Sticker to Captured Photo: In the Border Image click event I passed the DrawType as "Border" and in the mouse move event I will call the draw() method. This method depends on the DrawingTypes selected. I will add the features to the canvas tag, for example if Border is selected then I will draw the border for the canvas tag. If Images is selected then I will add the selected sticker image to the canvas tag.

*Sticker to Captured Photo