Dynamic image composition by using Elements
ImageDraw Elements are simple graphical objects which are assembled together to
create a composite image. All elements are drawn on the Canvas producing the output
composite image. In addition, each element can have associated to it zero or more
imaging Actions that affect its appearance (more on this later).
|
IMAGEDRAW ELEMENTS |
|
IMAGES (ImageElement) |
TEXTS (TextElement) & WORDART (WordArtElement) |
AUTOSHAPES (ShapeElement) |
Image Elements can be acquired from several sources such as a URL or path file,
Base64 string, byte array, or System.Drawing.Image object. Input Image formats supported:
GIF, JPG/JPEG, BMP, TIFF, ICO, WMF, EMF and PNG.
|
Text & WordArt Elements are created by specifying some basic properties such as Text, Font, ForeColor, StrokeColor, etc. They are useful for drawing custom captions and watermarks. Text & WordArt Elements support Custom Font Files (*.TTF), Outlined Texts, Multiline, AutoSize, etc
|
AutoShape Elements are preset shapes like rectangles, ovals, lines, arrows, stars,
and polygons. AutoShapes support imaging effects, text inside them by allowing padding
text feature, border roundness and dashed patterns.
|
|
|
|
Imaging Effects (Actions)
ImageDraw Actions are imaging effects that are applied on any ImageDraw Element
objects. ImageDraw comes with 33 built-in ready to use Actions.
|
|
|
Merging Actions
ImageDraw architecture allows you to apply more than one Action on a given Element
(ImageElement, TextElement, and ShapeElement). The following figures show how some
combination of Actions applied on an Element can improve its appearance.
ConvertToSepia + Filmstrip + PerspectiveShadow
 |
Polaroid + DropShadow
 |
|
|
|
Image Formats Supported and Cross-Browser Compatibility
ImageDraw controls support the following image formats.
| (i) INPUT IMAGE FORMATS |
(ii) OUTPUT IMAGE FORMATS |
| GIF (Transparency Support) |
JPEG / JPG |
PNG (Transparency Support) |
BMP |
WBMP |
| PNG |
 |
|
|
|
|
| GIF |
|
|
|
|
|
| JPEG / JPG |
|
|
|
|
|
| BMP |
|
|
|
|
|
| TIFF |
|
|
|
|
|
| WMF |
|
|
|
|
|
| EMF |
|
|
|
|
|
| ICO |
|
|
|
|
|
| GDI+ Image Object |
|
|
|
|
|
(i) Input Image Formats
ImageDraw controls manage input images by wrapping them through ImageElement
objects.
(ii) Output Image Formats
Each ImageDraw control features the ImageFormat property which indicates
what image format must be rendered.
- GIF output images support Index Transparency
- PNG output images support Alpha Channel Transparency with PNG Hacking
for Internet Explorer 5.x & 6.x (Win32 Platform) out-of-the-box. Please refer
to the product help documentation to learn more about this topic.
Do you need Cross-Browser Compatibility?
ImageDraw controls render images in all the most popular browsers, including
Internet Explorer, Netscape, Opera, Mozilla, Firefox, and Safari.
|
|
|
Visual Studio, VWD and Expression Web Design-time Support
ImageDraw for ASP.NET features a powerful designer and utilities. When you drag
& drop ImageDraw from Visual Studio Toolbox, the ImageDraw Designer shows you the
output image that ImageDraw will render at runtime.
ImageDraw for ASP.NET works in most popular and modern ASP.NET Development Tools
including:
- Microsoft Visual Studio 2005/2008
- Microsoft Visual Web Developer 2005/2008 Express Edition
- Microsoft Expression Web
 |
Neodynamic ImageDraw controls allow you to design and create composite images using
a designer tool called ImageDraw Visual Editor. ImageDraw Visual Editor is fully
integrated with Visual Studio allowing you to manage ImageElements, TextElements
and ShapeElements as well as built-in Imaging Actions. You get instant visual feedback
of how the composite image will look like. The Preview Output Image tab lets you
to setting up the output image format, color depth, and with the possibility of
saving the image on your disk.
|
|
|
|
SQL Server BLOB (Binary Large Object) Data Binding
ImageDraw controls can be bound to SQL Server BLOB (Binary Large Object)
data type allowing you to deliver dynamic images which are stored in that kind of
data source. Not only you can deliver BLOB images as is but built-in Imaging
Actions can be applied on those items as well, greatly enhancing their appearance
without efforts.
The following figure is a screenshot of one of the ImageDraw Demos available at
our website. This particular demo features most ImageDraw Data Binding capabilities
in SQL Server BLOB scenarios. Please take a look at this white paper "How
To: SQL BLOB Composite Images Data Binding using ASP.NET and ImageDraw"
about SQL Server BLOB Data Binding and ImageDraw controls.
|
|
|
XML Base64 string Data Binding
Images or pictures stored in XML Base64 string format, is another Data Binding
scenario that ImageDraw controls support out-of-the-box. Just as for SQL Server
BLOB scenario, images stored in XML Base64 string format can be rendered
as is or with built-in Imaging Actions applied on those items as well, enhancing
their appearance without efforts.
The following figure is a screenshot of one of the ImageDraw Demos available at
our website. This demo features most ImageDraw Data Binding capabilities
in XML Base64 scenarios. Please take a look at this Step-By-Step Guide "Dynamic Composite
Image using ASP.NET GridView Data Binding" about XML Base64 Data Binding and
ImageDraw controls.
|
|
|
Dynamic Image Composition with an ASP.NET Live Weather XML RSS Service
If you have read all info about ImageDraw so far, you had realized that it's
very flexible and powerful. The next figure illustrates how you can use ImageDraw
controls to develop an ASP.NET Web Application that features Live Weather
info consuming Yahoo! Weather XML RSS service.
This demo uses an ImageDrawMap control to dynamically create a Weather Composite
Image consuming Yahoo! Weather XML RSS service in an ASP.NET Web Application.
This demo does intensive use of TextElements and ImageElements (all texts
on the previous figure are created by TextElements) applying onto them some
impressive Actions such as GlassTable effect.
Please take a look at this Step-By-Step Guide "How
to create a Dynamic Weather Composite Image Map using ASP.NET and RSS" about
ImageDraw Dynamic Image Composition in ASP.NET Web Applications.
|
|
|
Manipulate and use Images embedded into ASP.NET Resources (*.RESX)
ASP.NET 2.0 features new Resources capabilities allowing you, for example, to store
image files embedded into RESX files without you need to deploy those files.
ImageDraw was designed keeping in mind that feature and thus, you can manipulate
and use those embedded images to dynamically create composite images. The following
figure is a screenshot of one of the ImageDraw Demos available at our website. Please
take a look at this Step-By-Step Guide "How
to dynamically create composite images using embedded images in ASP.NET Resource
RESX" about Images Embedded into Resource (RESX) files and ImageDraw controls.
|
|
|
ASP.NET Mobile technology support
ImageDraw for ASP.NET Mobile technology lets you to easily create Mobile
WebForms for displaying dynamic composite images on Mobile Device's Internet
Browsers supporting XHTML MP/HTML/C-HTML or WAP/WML standards.
For HTML-based Mobile Browsers, ImageDraw can be instructed to render output
images in the image format preferred by them i.e. GIF, JPEG, PNG or BMP; and
for WAP/WML-based Mobile Browsers, ImageDraw can render the output composite
image in Wireless Bitmap (WBMP) format.
|
| |
XML Templates for Dynamic Image Composition
ImageDraw features XML Template i.e. you can instruct an ImageDraw object for exporting/importing the composite image in XML text formatting. By invoking a simple class method you can get a string representation of the Output Composite Image in XML format allowing you to save it in any kind of data source be it SQL Server Database, file on disk, and so on. In the same way, you can restore the Composite Image from a XML Template by just invoking a simple class method as well.
|
|
