Project Description

Online Image Editor (Dream in Canvas)

In this tool, you can edit or adapt your Photo or Image Online in your browser. After uploading, you can adjust your photo by increasing/decreasing Brightness and Contrast. Several filters and effects are available to enhance your photo: Sepia, Sepia and Negative Effect. You can also add Text to your photos and you can choose from any number of common font types. You can adjust text position and color. 

This project has mainly two classes ImageOnDemand and SouvikCanvas.

 

Basically public class ImageOnDemand : IHttpHandler is the request handler which handled all the request and generate the image on demand.

It converts to: Gray scale, sepia and negative,
It re-sizes with high quality,
and sets brightness and contrast

You just call all these functions from your code, it just resize and grayscale an uploaded image automatically. You need to write only two-three lines of code.

1. First Create a class named ImageOnDemand, you can compile into dll.

2. Second, You need to add this line to your web.config file  <system.web>: 

3. Set the src attribute of an image

http://localhost:4309/ImageHandlerTest/ImageOnDemand.ashx?url=%7e%2fPicture%2ffc29891a-831d-4137-aebf-15d8bad3c271.Jpeg&maxwidth=0&maxheight=0&grayscaling=False&negative=False&sepia=False&brightness=0&contrast=1&watermark=&position=TopLeft&xaxis=10&yaxis=10&normal=False&fontcolor=White&fontfamily=Verdana

Where:

  • url - stands for the UrlEncoded Path of your image.
  • maxwidth - stands for the maximum width of the image.
  • maxheight - stands for the maximum height of the image.
  • grayscaling -  stands for grayscaling the image.
  • negetive - stands for negative of the image.
  • sepia - stands for sepia of the image.
  • brightness - stands for brightness of the image (between -1 and 1).
  • contrast - stand for contrast of the image (between 0 and 3 where 1 is standard) . 
  • watermark - text of the image.
  • Position - stand for position of the text. It may be
#region WatermarkPosition
    public enum WatermarkPosition
    {
        TopLeft,
        TopRight,
        TopMiddle,
        BottomLeft,
        BottomRight,
        BottomMiddle,
        MiddleLeft,
        MiddleRight,
        Center
    }
    #endregion


Fourth:  Now we need to create this control and compile and use it together:

public class SouvikCanvas : System.Web.UI.WebControls.Image is the custom web control which defined the following properties.  

using System;
using System.Drawing;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.ComponentModel;
using System.ComponentModel.Design;

namespace CustomWebControls
{
    /// <summary>
    /// Author : Souvik Das
    /// </summary>
    /// 

    [DefaultProperty("src")]
    [ToolboxData("<{0}:SouvikCanvas runat="server"></{0}:SouvikCanvas>")]
    [ToolboxBitmap(typeof(System.Web.UI.WebControls.Image))]

    public class SouvikCanvas : System.Web.UI.WebControls.Image
    {

        [Bindable(true)]
        [Category("Appearance")]
        [DefaultValue("Souvik")]
        [Description("Water Mark of the image.")]

        public virtual string WaterMark
        {
            get
            {
                object b = ViewState["WaterMark"];
                return (b == null) ? string.Empty : (string)b;
            }
            set
            {
                ViewState["WaterMark"] = value;
            }
        }

        [Bindable(true)]
        [Category("Appearance")]
        [DefaultValue("Verdana")]
        [Description("Font Family of the image.")]

        public virtual string FontFamily
        {
            get
            {
                object b = ViewState["FontFamily"];
                return (b == null) ? "Verdana" : (string)b;
            }
            set
            {
                ViewState["FontFamily"] = value;
            }
        }

        [Bindable(true)]
        [Category("Appearance")]
        [DefaultValue("White")]
        [Description("Font Color of the image.")]

        public virtual string FontColor
        {
            get
            {
                object b = ViewState["FontColor"];
                return (b == null) ? "White" : (string)b;
            }
            set
            {
                ViewState["FontColor"] = value;
            }
        }

 


 

Last edited Sep 17, 2012 at 8:35 AM by souvikdas, version 3