Image Editor Script

Summary:

This control is not a control. This page is intended only for asp.net developpers-users with experience. If you want the GUI (the one that helps you with buttons and commands to make the image you want), look it up on the main page of this guide. The script analyzes a hashtable stored in memory (Session). Then it draws and configures the image according to certain commands found on the hastable. The script is the file IMG-ImageEditor.aspx found in the Files folder. It returns an image stream when loaded.

The script file is not the wizard for making images. The script file is intended for advanced asp.net users. The control with which you can edit images is the GUI one. You can find it here.

More:

A hashtable must be stored in accordance to the instructions found in the instructions section of this page. The script works with a loop that is repeated for each command found in the hashtable. The first command is always the "Init" which specifies the characteristics of the image. The other commands can be of two types: Path and Image. The first type includes shapes and texts. The second defines a picture file to be drawn on the editable image.
Generally, the script manipulates a Graphics object and draws things on it. Advanced features include right now Shadow and Blur. If an error occurs while editing the Graphics path, the script draws an image with the message "Error" with small size, and returns it.

Instructions on Usage:

For the script to work you only need to store a hashtable to Session("ImageEditorCommands"). That is from where the script read its commands. The hashtable you store must have this format:
A mandatory key must be named "Init" and contains information for the characteristics of the image (type, width, height...). An example of adding such a "command" to the hashtable we want is:

q.Add("Init", "Width=200,Height=200,PixelFormat=9,TextRenderingHint=4,CompositingMode=0," _ & "CompositingQuality=3,SmoothingMode=2,InterpolationMode=2,PixelOffsetMode=0,fFormat=jpg," _ & "bgBrush:bType=2,bFColor=#555555,bBColor=#777777,bStyle=20,bFOpac=255,bBOpac=255,:bgBrush")

Explanation: q = Hashtable. Width and height are expressed in pixels. fFormat is the format of the image and takes values "gif" and "jpg". The other integers define advanced image characteristics. You can find to what they refer by searching the .NET Framework SDK help guide.
The portion between the "bgBrush" defines the brush (here, background) of the image. Different types of brushed exist. To learn how to define them, read the brush instructions section below.
Also keep in mind that you must give colors in hex format (eg. #777777).

After the Init key, you define optional commands for things to draw on the image. The keys must be named "Act" + the number of the acts, e.g. Act3. But by defining a key Act3 and its value, you must have already defined Act1 and Act2. So, you must count them right. If you want an empty command define it like this:
q.Add("Act1", "DoNothing:") There are two types of Acts besides the empty act. The first one is the Path and the second is the Image. You can find instructions for them in the below sections.

Instructions on Brushes:

Brushes can be defined by a portion of string. An example is shown in the Init key of the hashtable above. They are always contained between two strings like "Brush:" and ":Brush".
There are 4 types of brushes to use. Examples are shown below.

Solid: bType=0,bColor=#000000,
Gradient: bType=1,bGradFirst=#FFFFFF,bGradLast=#444444,bGradAngle=180,bOpacFirst=255,bOpacLast=100,
bGradFirst = First color of the linear gradient brush. bGradLast = Last color. bGradAngle = The angle of the linear gradient brush. bOpacFirst = The opacity of the first color. bOpacLast = The opacity of the last color.
Hatch: bType=2,bFColor=#CCFFAA,bBColor=#333333,bStyle=17,bFOpac=255,bBOpac=255,
bFColor = Forecolor of the hatch brush. bBColor = Background color of the hatch brush. bStyle = The style of the hatch brush as found in the .Net Framework SDK help guide. bFOpac = Opacity of the forecolor. bBOpac = Opacity of the background color.
Texture: bType=3,bWrapStyle=2,bImagePath=..\Images\ImageEditor\Textures\tmpTexture2.jpg,
bWrapStyle = The style of the wrap mode of the texture brush as found in the .Net Framework SDK help guide. bImagePath = The relative path of the image file for the texture brush (must be found on the server).

Path Act Type:

Path is one type of command you can store in the hashtable as an act. It is stores a sequence of points which define shapes (even text). Specifically, the script must use a graphicspath class. This class can be constructed with the sequence of points and the type of each point (the type of shape it defines e.g. line). So, you must provide the script with points and types. The points are stored as an array of PointF() and the types as an array of Byte(). These two, you must serialize using the functions included in the script already (the GetSerializedStr function). Then you add the path act to the hashtable like this:

q.Add("Act2", "DrawPath:Points=" & SerialPoints & ",Types=" & SerialTypes & "," _ & "Fill=True,FillMode=0,PenWidth=3,PenColor=#000000,Opacity=255," _ & "ShadowLevels=6,ShadowColor=#000000,ShadowOrientation=BottomLeft,Blur=False," _ & "Brush:bType=1,bGradFirst=#FFFFFF,bGradLast=#444444, bGradAngle=180,bOpacFirst=255,bOpacLast=100,:Brush")

Explanation: q = Hashtable. Act2 = This is the format you use for each of your commands (the next command in the hashatble must have a key of Act3 and so on..). DrawPath = Tells the script to draw a path. SerialPoints = The string of the serialized PointF() with the function included in the script (to use it, copy it, and use the function on your page). SerialTypes = The string of the serialized Byte() with the same way of production as the SerialPoints. Fill = Defines whether the interior of the path is filled. FillMode = 0 for alternate and 1 for winding (advise asp.net SDK). PenWidth = the width of the outline. PenColor = the hex color of the outline. Opacity = The overall opacity of the path. ShadowLevels = The levels that the shadow must have (0 for none). ShadowColor = the hex color of the shadow. ShadowOrientation = The orientation of the shadow (upper, upperleft, left, bottomleft, bottom, bottomright, right, upperright). Blur = If True, then the shadow becomes somewhat like blur.
The part between the "Brush:" and ":Brush" is the brush of the fill. Advise the Brush section to see how to define brushes.

Image Act Type:

The image act type draws an image loaded from a file on the server, on the current edited image. It's fairly simple to add this type of command to the hashtable as an act:

q.Add("Act1", "DrawImage:ImagePath=../Images/ToolkitScreenshot.jpg,Width=302,Height=202,X=0,Y=0,")

Explanation: q = Hashtable. DrawImage = Tells the script to draw an image of the server. ImagePath = The relative path of the image file to be drawn. Width = the width of the drawn image. Height = the height of the drawn image. X,Y = The coordinates of the upper-left corner of the drawn image. (All measures in pixels)