Implement image conversion and filtering in ASP. net2.0

Prepared by Zhu Xianzhong

This article describes an easy way to create custom Web controls and use them to display Microsoft DirectX image conversion and filtering effects on an ASP. NET 2.0 web page.

I. Introduction

This article describes an easy way to create custom Web controls and apply them to display Microsoft DirectX image conversion and filtering effects on an ASP. NET 2.0 web page. This article includes a class library with 11 different controls, each of which displays some aspects of the Microsoft DirectX image conversion and filtering effect. Five of these 11 controls are page transition effects controls, and the other six are filter effects controls used to enhance the text appearance.

Each of the six filter effects controls used to enhance the text appearance is implemented as a container control. This allows the user to directly type the text into the container, or put a label in the control and apply the corresponding effect to the label. The purpose of using a tag control is to provide an easy standard HTML-based method for resizing, centering, and formatting text.

The remaining 5 controls are used to add page transition effects to a Web page without any additional HTML or VBCode. To use these controls, you only need to drag them to the form. However, these controls do not have visual components, although the page can be displayed in the browser; when the user leaves the page, the corresponding transition effect is used to open the next page.

The example project in this article contains a simple website containing a single default. aspx page, which displays the above six text enhancement controls and a page transition effect control one by one.

Note that the methods used in this article to demonstrate projects and control libraries are only applicable to Internet Explorer and are not supported by other browser types. If you work in an enterprise intranet and you can ensure that all users can access Internet Explorer, this set of controls may be useful to you. If you publish these controls publicly, a user who uses a non-Internet Explorer browser to surf will still be able to read the corresponding text, but the effect will not exist. If you really want to make a public release, you can first check your browser and if it is not IE, you should suggest that they use IE to watch the site.

Figure 1. filtering effect in the demo project

Ii. Start

First, extract the class libraries and demo projects included in the source code. When you check the corresponding content, you will see that there are two projects in one solution. The dxfiltercontrols Project is a class library that contains the 11 controls mentioned above. The dxfiltertestsite Project is a demo website where these controls can be displayed and viewed on a single default. aspx web page.

In the DX filter control project, there are 11 independent controls:

1. ccblurredlabel 2. ccdropshadow 3. ccemboss 4. ccengrave 5. ccglowingtext 6. ccgradient 7. ccpagetransition_iris 8. ccpagetransition_pixelate 9. ccpagetransition_radialwipe 10. ccpagetransition_gradientwipe 11. ccpagetransition_wheel

As I have mentioned, the first six controls are used to enhance the text appearance (using a Microsoft DirectX Filter ApplicationProgram). Each of these controls is constructed as a container, and any text directly put into a container or tag will have a corresponding filtering effect, as long as it can be generated into a Microsoft Internet Explorer browser.

The first five controls are used to provide improved text filtering for container content. The 6th control (ccgradient) is only a panel that has a gradient background and does not actually change or directly affect the text in the container.

Controls from 7th to 11th are page transition effects controls. You can drag a single page transition control to a form and set its attributes (many attributes do not need to be set ). Result: When the user exits the current page, the next page to be opened is opened with the specified effect. Although in this instance, I use these controls to create a transitional effect (when transitioning to a new page), however, these transition effects can be configured to call this effect when loading the container page. You can even use these transition effects on a single page to use a new image instead of another image.

Figure 2: pixel-based Page Transition

In addition, this is not a very complex set of controls, but I think they have already been able to demonstrate what filtering effects can be achieved through DirectX. You can refer to the Microsoft documentation on the website to explore other filtering effects.
3. Text enhancement filter effect control

Each of the above six text improvement controls contained in the sample control library is basically created in the same format. Here, we do not want to describe these controls one by one, but only the ccemboss controls. The ccemboss control inherits from system. web. UI. webcontrol. the reference of design is added to the basic web control, and an import statement is added to include system. web. UI. design library. This addition is necessary to create some design-time support elements to make the control easier to use at the design time. The code is divided into three independent regions: declarations, properties, and rendering. Next, let's take a look at the beginning of the class definition:

Imports system Imports system. Collections. Generic Imports system. componentmodel Imports system. Text Imports system. Web Imports system. Web. UI Imports system. Web. UI. Design Imports system. Web. UI. webcontrols <Designer (GetType (embossedlabeldesigner)> _ <Parsechildren (false)> _ Public class ccemboss inherits webcontrol

Note: After the Import Statement, the property data display class uses a custom designer included in the embossedlabeldesigner class. Later, we will describe this designer, which is responsible for providing some design time support for the control. Note that the parsechildren attribute has been added and is set to false. This is to prevent the page analyzer from analyzing the content of the control, because the control is a container control and its content does not belong to that control.

The declarations area follows and is simple; it contains several private member variables used to store user selection information for this control. For the filter effect, refer to the Microsoft documentation to determine whether there are any other attributes to be explored.

# Region "declarations" Private menabled as Boolean Private mbias as single # End Region

Here, the menabled attribute is a Boolean value that will be passed to the filter effect, and it can achieve the desired effect exactly; it can start or stop the effect. Here mbias is used to determine the event range. I believe that Microsoft documentation shows that 0.7 is a typical default value for this effect.

The following is the properties area. Its content is limited to providing public access to the content of Private member variables. The implementation code is roughly as follows:

# Region "properties" <Category ("embossed label")> _ <Browsable (true)> _ <Description ("Enable or display the embossed effect.")> _ Public property embossenabled () as Boolean Get Ensurechildcontrols () Return menabled End get Set (byval value as Boolean) Ensurechildcontrols () Menabled = Value End set End Property <Category ("embossed label")> _ <Browsable (true)> _ <Description ("set the bias for the embossed effect (typically 0.7).")> _ Public property bias () as single Get Ensurechildcontrols () Return mbias End get Set (byval value as Single) Ensurechildcontrols () Mbias = Value End set End Property # End Region

The last part is the rendering area. It contains the necessary code to activate the effect at runtime. The code is roughly as follows:

# Region "rendering" Protected overrides sub addattributestorender (byval writer Htmltextwriter) Writer. addstyleattribute (htmltextwriterstyle. filter ,_ "Progid: DXImageTransform. Microsoft. emboss (bias =" & bias. tostring ()&_ ", Enabled =" & embossenabled. tostring () & "); width :"& Width. value. tostring () & "PX ") Mybase. addattributestorender (writer) End sub # End Region End Class

Note: here we reload the addattributestorender subroutine and use htmltextwriter to add a style attribute. This attribute corresponds to the DirectX filter. You can also see that this exposed attribute is passed to this subroutine defined in the filter. This is to add the filter effect to the container position at runtime.

This section is followed by the definition of the embossedlabeldesigner class. This class can be written into a separate class file; however, I prefer this method because it makes everything in the design code and corresponding goals so clear. This part of the Code provides design support for the control:

Public class embossedlabeldesigner Inherits containercontroldesigner Protected overrides sub adddesigntimecssattributes (byval styleattributes As system. Collections. idictionary) Dim embosslbl as ccemboss = ctype (Me. component, ccemboss) Styleattributes. Add ("filter", "progid: DXImageTransform. Microsoft. emboss (bias = "& Embosslbl. Bias. tostring () & ", enabled = "& Embosslbl. enabled. tostring () & "); width :"& Embosslbl. Width. value. tostring () & "PX ") Mybase. adddesigntimecssattributes (styleattributes) End sub End Class

As you can see, you basically add the same filtering effect on the control as at runtime, so that you can see the same visualization effect of the filter. However, you are now using the Form Designer. This well summarizes the way each of these controls works, although you will notice some minor differences between other attributes and methods of the form.
Iv. Page Transition effect control

In this section, as in the previous section, we will only discuss one of the five page transition effects controls (because of their great similarity ). I will discuss the gradient erasure transition effect control. Refer to the sample code provided in this article to learn more about the differences between this control and other controls.

This gradient erasure Page Transition control (ccpagetransitition_gradientwipe) starts in a way similar to the text Improvement Control. The implementation code is divided into three main areas: declarations, properties, and rendering.

The declaration part of this class looks as follows:

Imports system Imports system. Collections. Generic Imports system. componentmodel Imports system. Text Imports system. Web Imports system. Web. UI Imports system. Web. UI. webcontrols ''' <Summary> ''' Transition effect (for Internet Explorer only) '''Drag the control to a page. When the page is exited, the next page passes the transition ''' Effect (gradient wipe) for display ''' </Summary> ''' <Remarks> </remarks> Public class ccpagetransitition_gradientwipe Inherits webcontrol Private sub ccpagetransitition_gradientwipe_init (byval sender as object, Byval e as system. eventargs) handles me. init Me. width = 20 Me. Height = 20 End sub

You will notice that we didn't import system. Web. UI. design into this class, because for this control, there is no possibility of Visualization at the design time. You may also notice that the initialization of the control is used to set the height and width of the control to 20 pixels respectively. This is only required when you create some instructions on the page form (an empty box) at the design time. This box does not appear on the web form at runtime.

After class initialization, I added the following declarations region. This area is used to store every private member variable in this class. The declaration of this region looks as follows:

# Region "declarations" Private mduration as single = 1 # End Region

You can see that this class only uses one private member variable. After the declarations area, it is followed by the properties area; it looks as follows:

# Region "properties" <Category ("gradient wipe transition")> _ <Browsable (true)> _ <Description ("set the effect duration (typically 1 or 2)")> _ Public property transitionduration () as single Get Return mduration End get Set (byval value as Single) Mduration = Value End set End Property # End Region

This attribute is used to set the duration of the page transition effect. Next, let's take a look at the code for generating a (redering) area block:

# Region "rendering" Protected overrides sub rendercontents (byval writer as system. Web. UI. htmltextwriter) Try Dim Sb as new stringbuilder SB. append ("<meta http-equiv = 'page-eg '") SB. append ("content = 'progid: DXImageTransform ._ Microsoft. gradientwipe (duration = "& transitionduration. tostring () & ") '/> ") Writer. renderbegintag (htmltextwritertag. Div) Writer. Write (sb. tostring ()) Writer. renderendtag () Catch ex as exception Writer. renderbegintag (htmltextwritertag. Div) Writer. Write ("gradient Wipe Transition control ") Writer. renderendtag () End try End sub # End Region End Class

This part of the code is quite direct, rendercontents subroutines are overloaded, and new content is included in a try-Catch Block. Although I didn't handle any errors (in the case of an error), I wrote the string "gradient Wipe Transition control" to a div as a placeholder for a control that can be placed here.

The code in the try block uses only one string builder to format the text that we want to put directly in the source of the web page at runtime. The Code contained in the string constructor is used to create a request and associate the page exit event with the page filter effect. You may also notice that the duration attribute is passed to the string constructor to set the value of the duration parameter used by the filter.

After the string constructor is configured, the content of the string constructor is written to the page. When this or any other page transition control in the sample class library is added to a page, the page exits and the same attribute is displayed. The result is that the user leaves the page at any time, this transition effect will be used on the next page.

V. Conclusion

This is the end! In fact, I also suggest you study other controls and test them one by one on the testing website. Some other filtering effects and page transition are available. I think you must expand this library. Similarly, there are other filtering attributes that need to be further discussed. Finally, I wish you a pleasant programming!